2016-09-27 11 views
0

私のプロジェクトで最新の角度2のルーティングを使ってみましたが、正しく動作していないようです(それは常にpath: '', redirectTo: 'dashboard', pathMatch: 'full'になります)。多分誰かがそれを経験しているでしょうか?角2の最終ルーティング

これは私のrouting.module.ts次のとおりです。また、すべてのコンポーネントの輸入及び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ですが含まれて

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); 

- 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/...)。しかしクリックはダッシュボードにのみリダイレクトされます。

+0

コロン(:)ステータスパス – Yong

+0

と削除は、削除 ':'コンソールは、このエラーがスローされますが、 'エラー:「をStatusComponent'' – edamerau

+0

インポートを{ロードするための第一出口を見つけることができませんStatusComponent}を './status.component'から削除し、それをapp.module.tsの宣言に追加します。 – Yong

答えて

0

plnkr

const appRoutes: Routes = [ 
    { 
    path: '', 
    redirectTo: '/dashboard', 
    pathMatch: 'full' 
    }, 
    { 
    path: 'dashboard', 
    children: [ 
    { 
     path: '', 
     component: DashboardComponent 
    }, 
    { 
     path: 'status', 
     component: StatusComponent 
    }] 
    } 
]; 
関連する問題