Angular 2 Route ändert sich in geschachtelte Komponente

Question

Ich habe ein ziemlich einfaches Angular 2-Problem. Ich habe eine Hauptansicht mit einer Toolbar oben und einem Router Outlet direkt darunter.

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 
} 

Dann ist mein toolbar.ts Ich habe die in ihrem Inneren verschachtelt ist die Liste meiner Routennavigation

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 
} 

Dann hier sind die Routenverknüpfungen, die in der Symbolleiste verschachtelt sind und die Ansicht unter der Symbolleiste in der Hauptansicht

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{ 

} 

Also, was mache ich falsch? Dies ist die Art, wie ich es einrichten möchte, aber wenn das nicht machbar ist, dann könnte ich vielleicht die Routen in die Symbolleiste verschieben und wenn das nicht machbar ist, könnte ich einfach die gesamte Symbolleiste in die Hauptansicht verschieben, was ich nicht mache Ich will es tun, aber wenn ich muss, werde ich es tun.

UPDATE

entfernt ROUTER_PROVIDERS von appRoutes.ts, mit noch gleiche Problem.

UPDATE 2

Added '/' zu url Routen auf Vorschlag der Antwort, gleiche Problem, URL in der Adressleiste ändert aber ui unterhalb der Symbolleiste nicht

UPDATE 3

entfernt providers: [ROUTER_PROVIDERS] von toolbar.ts und mainView.ts Dateien und Bootstrap ROUTER_PROVIDERS in app.ts

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

Scheint, den Trick getan zu haben. Vielen Dank an Gunter, dass er bei mir geblieben ist und mir geholfen hat, das Problem zu lösen. Sein Plunker hat wirklich geholfen!

Answer 1

update2

Plunker example

Update

Präfix die Routennamen mit / zu sagen, dass die Wurzel Router diese Route navigieren soll:

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

original

Bieten nicht ROUTER_PROVIDERS mehr als einmal

providers: [ 
    EventService, 
    ROUTER_PROVIDERS 
] 

ROUTER_PROVIDERS sollte genau einmal an der Wurzel Komponente zur Verfügung gestellt werden und nirgendwo sonst (alternativ in boostrap(...))