Angular 2最終路由

我試過在我的項目中使用最新的Angular 2路由，但它似乎不能正常工作（它始終在path: '', redirectTo: 'dashboard', pathMatch: 'full'），我不明白爲什麼。也許有人更有經驗呢？Angular 2最終路由

這是我routing.module.ts：

export const appRoutes: Routes = [{ 
    path: 'dashboard', 
    component: DashboardComponent, 
    children: [ 
    { 
     path: ':status', 
     component: StatusComponent 
    }, 
    { 
     path: ':history', 
     component: HistoryComponent 
    }, 
    { 
     path: ':documentation', 
     component: DocumentationComponent 
    }] 
}, 
    { 
    path: '**', 
    component: PageNotFoundComponent 
    }, 
    { 
    path: '', 
    redirectTo: 'dashboard', 
    pathMatch: 'full' 
    } 
]; 
export const routing = RouterModule.forRoot(appRoutes);

其中還包括所有組件的進口和import {Routes, RouterModule} from '@angular/router';

這是我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 { ROUTER_DIRECTIVES } from '@angular/router'; 
import {routing} from './routing.module'; 

@NgModule({ 
    declarations: [ 
    ...,], 
     imports: [ 
     BrowserModule, 
     FormsModule, 
     HttpModule, 
     routing 
     ], 
     directives: ROUTER_DIRECTIVES, 
     providers: [], 
     bootstrap: [AppComponent] 
    }) 
    export class AppModule { }

最後的HTML - app.component.html

<div class="row"> 
    <div class="col-xs-3"> 
    <app-sidebar></app-sidebar> 
    </div> 
    <div class="col-xs-9"> 
    <app-navbar></app-navbar> 
    <router-outlet></router-outlet> 
    </div> 
</div>

0在邊欄

<a [routerLink]="['dashboard/status']">Link</a>

側欄和導航欄

一例鏈路被示出。這些鏈接似乎是正確的（懸停顯示localhost：4200/dashboard/...），但點擊只會重定向到儀表板。

來源

2016-09-27 edamerau

刪除冒號（:)在狀態通路 – Yong

刪除'：'但控制檯拋出這個錯誤'錯誤：無法找到主要出口到裝載「StatusComponent'' – edamerau

然後導入{ StatusComponent}從'./status.component'添加到app.module.ts中的聲明 – Yong

plnkr

const appRoutes: Routes = [ 
    { 
    path: '', 
    redirectTo: '/dashboard', 
    pathMatch: 'full' 
    }, 
    { 
    path: 'dashboard', 
    children: [ 
    { 
     path: '', 
     component: DashboardComponent 
    }, 
    { 
     path: 'status', 
     component: StatusComponent 
    }] 
    } 
];

來源

2016-09-27 13:35:32 Yong

Angular 2最終路由

回答

相關問題