角度2のプロジェクトでルーティングに問題があります。これは現在、インデックスページのPageNotFoundComponent、HomeComponent、および管理セクションを含む非常に小さなアプリケーションです。角度2のルーティングの問題
管理セクションには、メインページのメインAdminComponent、ダッシュボードセクションのAdminDashboardComponent、ManageCrisisComponent、およびManageHeroComponentが含まれています。
これは基本的に、ルーティングセクションのAngularsウェブサイトにあるHeroesアプリケーションです。
手元にある問題は、管理セクション内のコンポーネントが読み込まれないことです。だから私は何も起こらずにページに行くことができるようにそれを打ち破ろうとしているだけです。
アプリケーションには、ルートを制御または定義するxxx-routing.module.tsファイルと、独自のxxx.module.tsファイルが含まれています。したがって、基本的には、app-routing.module.tsファイルとapp.module.tsファイルとadmin-routing.module.tsファイル
以下はすべてのコードの内訳です。
アプリ-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
const APP_ROUTES: Routes = [
{ path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule', data: { preload: true }},
{ path: '', component: HomeComponent },
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(APP_ROUTES)
],
exports: [
RouterModule
]
})
export class AppRoutingModule {}
app.module.tsはここ
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { HomeComponent } from './home/home.component';
@NgModule({
declarations: [
AppComponent,
PageNotFoundComponent,
HomeComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
ファイルapp.component.htmlファイル
ここ<h2>App component</h2>
<hr>
<nav>
<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Home</a>
<a routerLink="admin" routerLinkActive="active">Admin</a>
</nav>
<router-outlet></router-outlet>
です管理者ファイルです
dminと-routing.module.tsファイル
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AdminComponent } from './admin.component';
import { AdminDashboardComponent } from './admin-dashboard.component';
import { ManageCrisisComponent } from './manage-crisis.component';
import { ManageHeroComponent } from './manage-hero.component';
const ADMIN_ROUTES: Routes = [
{ path: '', component: AdminComponent,
children: [
{ path: './dashboard', component: AdminDashboardComponent },
{ path: './manage-crisis', component: ManageCrisisComponent },
{ path: './manage-heroes', component: ManageHeroComponent }
],
data: { preload: true}
},
];
@NgModule({
imports: [
RouterModule.forChild(ADMIN_ROUTES)
],
exports: [ RouterModule ]
})
export class AdminRoutingModule {}
admin.module.tsが
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AdminRoutingModule } from './admin-routing.module';
import { AdminComponent } from './admin.component';
import { AdminDashboardComponent } from './admin-dashboard.component';
import { ManageCrisisComponent } from './manage-crisis.component';
import { ManageHeroComponent } from './manage-hero.component';
@NgModule({
imports: [
CommonModule,
FormsModule,
AdminRoutingModule
],
declarations: [
AdminComponent,
AdminDashboardComponent,
ManageCrisisComponent,
ManageHeroComponent
],
})
export class AdminModule {}
admin.component.htmlファイル
<h2>Admin Home</h2>
<nav>
<a routerLink="./dashboard" routerLinkActive="active">Dashboard</a>
<a routerLink="./manage-crisis" routerLinkActive="active">Manage Crisis</a>
<a routerLink="./manage-heroes" routerLinkActive="active">Manage Heroes</a>
</nav>
<router-outlet></router-outlet>
を提出し、ただ問題を修正再表示するために、アプリを起動すると、ホームページと管理ページのリンクが表示され、それらは機能します。 admin.component.htmlファイルにはダッシュボードと管理領域へのリンクが表示されていますが、それらをクリックすると、PageNotFoundコンポーネントのhtmlファイルが取得されます。基本的にはページを見つけて読み込むことができません。
ありがとうございます。