Wie kann ich Router Outlet von einer untergeordneten Komponente ausrichten?

Question

Ich habe eine linke Nav-Komponente, die in meine Haupt-AppComponent importiert wird. Was ich versuche zu implementieren, ist die Fähigkeit, auf einen Link im linken Navigationsbereich zu klicken und eine DataComponent in den Router-Ausgang der übergeordneten AppComponent zu laden.

Meine Eltern AppComponent sieht wie folgt aus:

import { LeftNavComponent } from 'app/left-nav/left-nav.component'; 
import { DataComponent } from 'app/data/data.component'; 

@Component({ 
    selector: 'main', 
    template: '<left-nav></left-nav><router-outlet></router-outlet>', 
    directives: [ROUTER_DIRECTIVES, LeftNavComponent] 
}) 
@RouteConfig([ 
    {path:'/data', name: 'Data', component: DataComponent} 
]) 

Mein Kind LeftNavComponent die wie folgt aussieht:

@Component({ 
    selector: 'left-nav', 
    directives: [ ROUTER_DIRECTIVES ], 
    providers: [ ROUTER_PROVIDERS ], 
    template: '<a [routerLink]="[ 'Data' ]">Show Me Data</a>'  
}) 

und die DataComponent Ich versuche, in den Router-Steckdose zu laden sieht wie folgt aus :

Wenn ich auf den Link klicke, ändert sich die URL zu/Daten, aber es scheint die DataComponent wird nicht tatsächlich geladen, da der Text "Dies ist, wo die Daten sein werden" nicht angezeigt wird.

Ich habe überprüft, dass die RouteConfig ordnungsgemäß funktioniert, da der Text angezeigt wird, wenn ich den Router-Link in der AppComponent Vorlage, so das Problem scheint, dass der Router-Link in der untergeordneten Komponente ist.

Jede Hilfe wäre genial.

Answer 1

Ich denke, das ist das, was Sie wollen:

template: '<a [routerLink]="[ '../Data' ]">Show Me Data</a>' 

oder wenn es sich um eine Route an der Wurzelkomponente ist:

template: '<a [routerLink]="[ '/Data' ]">Show Me Data</a>'