Как я могу настроить маршрутизатор-выход из дочернего компонента?

Question

У меня есть левый навигационный компонент, который импортируется в мой основной AppComponent. То, что я пытаюсь реализовать, - это возможность щелкнуть ссылку в левом навигаторе и загрузить ее DataComponent в маршрутизатор-выход родительского AppComponent.

Мой родитель AppComponent выглядит следующим образом:

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} 
]) 

Мой ребенок LeftNavComponent который выглядит следующим образом:

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

и DataComponent я пытаюсь загрузить в маршрутизатор-выходе выглядит следующим образом :

@Component({ 
    selector: 'data', 
    templateUrl: 'This is where the data will be' 
}) 

Когда я нажимаю на ссылку, url изменяется на/данные, но кажется, что DataComponent фактически не загружен, потому что текст «Это то, где данные будут», не отображается.

Я проверил, что RouteConfig работает правильно, поскольку текст появляется, если я помещаю ссылку маршрутизатора в шаблон AppComponent, поэтому проблема заключается в том, что ссылка на маршрутизатор находится в дочернем компоненте.

Любая помощь была бы потрясающей.

Answer 1

Я думаю, что это то, что вы хотите:

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

или, если это маршрут на корневой компонент:

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