Angular 2路由問題

我遇到了使用Angular 2項目進行路由的問題。它是一個非常小的應用程序，它包含一個PageNotFoundComponent，一個HomeComponent，索引頁和一個管理部分。Angular 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>

這裏是管理文件

a 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文件。所以基本上它沒有找到頁面並加載它。

在此先感謝。

來源

2017-04-13 Kaley36

對不起，好像我發現問題是什麼。我在路徑中放置了一個./，導致頁面加載不正確。

const ADMIN_ROUTES: Routes = [ 
{ path: '', component: AdminComponent, 
    children: [ 

     { path: 'dashboard', component: AdminDashboardComponent }, 
     { path: 'manage-crisis', component: ManageCrisisComponent }, 
     { path: 'manage-heroes', component: ManageHeroComponent } 
    ], 

}, 

];

來源

2017-04-13 17:01:16 Kaley36

Angular 2路由問題

回答

相關問題