ルータコンセントを子コンポーネントからどのようにターゲット設定できますか？

Question

私はメインのAppComponentにインポートされる左のナビゲーションコンポーネントを持っています。私が実装しようとしているのは、左側のナビゲーションでリンクをクリックし、親AppComponentのルータ出口にDataComponentをロードする機能です。

私の親AppComponentは次のようになります。

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

と私はルータ、アウトレットにロードしようとしているDataComponentは次のようになります。このようになります

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: 'data', 
    templateUrl: 'This is where the data will be' 
}) 

リンクをクリックすると、URLが/ dataに変わりますが、 DataComponentは実際にはロードされません。これは 'これはデータの場所です'というテキストが表示されないためです。

ルーターリンクがAppComponentテンプレートに置かれた場合にテキストが表示されるため、ルーターリンクが子コンポーネントにあるように見えるため、RouteConfigが正常に動作していることを確認しました。

ご協力いただければ幸いです。

Answer 1

私は、これはあなたが欲しいものだと思う：

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

か、ルートコンポーネントのルートである場合：返信用

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