Angular 2在嵌套組件中改變路線

Question

我有一個相當簡單的Angular 2問題。我有一個主視圖，頂部有一個工具欄，右下方有一個路由器出口。

mainView.ts

@Component({ 
    selector: 'pod-app', 
    template: ` 
     <pod-toolbar></pod-toolbar> 

     <router-outlet></router-outlet> <!-- USE THIS router-outlet --> 
    `, 
    directives: [ ToolbarComponent, RouteComponent, ROUTER_DIRECTIVES ], 
    providers: [ 
     EventService, 
     ROUTER_PROVIDERS 
    ] 
}) 

@RouteConfig([ 
    { 
     path: '/list', 
     name: 'ListView', 
     component: ListViewComponent, 
     useAsDefault: true 
    }, 
    { 
     path: '/tileView', 
     name: 'TileView', 
     component: TileViewComponent 
    }, 
    { 
     path: '/pdfView', 
     name: "PdfView", 
     component: PdfViewComponent 
    } 
]) 

export class MainComponent implements OnInit { 
    ...blah...blah...blah 
} 

然後，我有我的toolbar.ts其嵌套在我的路線導航列表

toolbar.ts

@Component({ 
    selector: 'pod-toolbar', 
    template: ` 
     <div class="demo-toolbar"> 
      <p> 
       <md-toolbar color="primary"> 

        <pod-routes></pod-routes> <!-- appRoutes.ts component --> 

       </md-toolbar> 
      </p> 

     </div> 
    `, 
    directives: [MdToolbar, MdButton,RouteComponent, ROUTER_DIRECTIVES], 
    providers: [ROUTER_PROVIDERS] 
}) 

export class ToolbarComponent implements OnInit { 
    ...blah...blah...blah 
} 

然後在這裏是嵌套在工具欄內的路線鏈接，需要更改下方的視圖工具欄上的MAINVIEW

appRoutes.ts

@Component({ 
    selector: 'pod-routes', 
    template: 
    ` 
     <nav> 
      <a [routerLink]="['/ListView']"><img src="pathto.png" height="45" width="45"></a> 
      <a [routerLink]="['/TileView']"><img src="pathto.png" height="40" width="45" ></a> 
      <a [routerLink]="['/PdfView']"><img src="pathto.png" height="40" width="45" ></a> 
     </nav> 
    `, 
    directives: [ROUTER_DIRECTIVES] 
}) 

export class RouteComponent{ 

} 

那麼，我究竟做錯了什麼？這是我希望它設置的方式，但如果這不可行，那麼也許我可以將路徑移動到工具欄中，如果這不是可行的，那麼我可以將整個工具欄移動到mainView中，我不會不想做，但如果我必須那麼我會的。

UPDATE

刪除從appRoutes.ts ROUTER_PROVIDERS，仍然有同樣的問題。

更新2

添加 '/' 在回答，同樣的問題，在URL地址欄的變化，但UI工具欄下面的建議URL路徑不

更新3

從toolbar.ts和mainView.ts文件中刪除providers: [ROUTER_PROVIDERS]和app.ts自舉ROUTER_PROVIDERS

bootstrap(MainComponent, [ROUTER_PROVIDERS, provide(LocationStrategy, {useClass: HashLocationStrategy}) ]) 
    .catch(err => console.error(err)); 

似乎已經做到了。非常感謝Gunter堅持我並幫助我解決問題。他的傭兵真的幫了大忙！

Answer 1

UPDATE2

Plunker example

更新

前綴與/路線名字告訴這根路由器應該定位到這條路線：

<a [routerLink]="['/ListView']"><img src="pathto.png" height="45" width="45"></a> 
<a [routerLink]="['/TileView']"><img src="pathto.png" height="40" width="45" ></a> 
<a [routerLink]="['/PdfView']"><img src="pathto.png" height="40" width="45" ></a> 

原

不提供ROUTER_PROVIDERS不止一次

providers: [ 
    EventService, 
    ROUTER_PROVIDERS 
] 

ROUTER_PROVIDERS應在根組件恰好一次提供和其他地方（或者在boostrap(...)）