angular2のネストされたルーティングが機能しない

Question

angular2のネストされたリンクを管理する方法。

たとえば、 は[routerLink]link111の代わりにapp.component.tsに定義すると

app.component.ts

import { Component, forwardRef } from 'angular2/core'; 
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router'; 
import {HTTP_PROVIDERS} from 'angular2/http'; 
import 'rxjs/Rx'; 

import { HeroService } from './hero.service'; 
import { DashboardComponent } from './dashboard.component'; 
import { HeroesComponent } from './heroes.component'; 
import { TestComponent } from './test.component'; 
import { HeroDetailComponent } from './hero-detail.component'; 
import { LinkComponent } from './link.ts' 


@Component({ 
    selector: 'my-app', 
    template: ` 
    <h1>{{title}}</h1> 
    <link111></link111> 
    <router-outlet></router-outlet> 
    `, 
    styleUrls: ['app/app.component.css'], 
    directives: [ROUTER_DIRECTIVES, forwardRef(() => LinkComponent)], 
    providers: [ 
    HTTP_PROVIDERS, 
    ROUTER_PROVIDERS, 
    HeroService 
    ] 
}) 
@RouteConfig([ 
    { 
    path: '/dashboard', 
    name: 'Dashboard', 
    component: DashboardComponent, 
    useAsDefault: true 
    }, 
    { 
    path: '/detail/:id', 
    name: 'HeroDetail', 
    component: HeroDetailComponent 
    }, 
    { 
    path: '/heroes', 
    name: 'Heroes', 
    component: HeroesComponent 
    }, 
    { 
    path: '/test', 
    name: 'Test', 
    component: TestComponent 
    } 
]) 
export class AppComponent { 
    title = 'Tour of Heroes'; 
} 

link.ts

import {Component} from 'angular2/core'; 
import { ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router'; 
@Component({ 
    selector:'link111', 
    template:` 
     <nav> 
      <a [routerLink]="['Dashboard']">Dashboard</a> 
      <a [routerLink]="['Heroes']">Heroes</a> 
      <a [routerLink]="['Test']">Test</a> 
     </nav> 
    `, 
    directives: [ROUTER_DIRECTIVES], 
    providers: [ROUTER_PROVIDERS] 
}) 
export class LinkComponent { 
} 

：私は2つのファイルを持っていますそれは動作しますが、タグを別のファイルに分けても動作しません。

ご協力ありがとうございます。

Answer 1

link111タグの代わりにapp.component.tsに[routerLink]を定義すると、 メインルートファイル（あなたの場合はapp.ts）から角度ルックルーティングが実行されますが、別のファイルでは、ルーティングよりも がルートファイルに定義されていますが、あなたはchildern（つまり親からではありません）から呼び出しているため動作しません。したがって、このような本 変更これを解決するために - ルートは./で始まる場合

 <a [routerLink]="['./Dashboard']">Dashboard</a> 
     <a [routerLink]="['./Heroes']">Heroes</a> 
     <a [routerLink]="['./Test']">Test</a> 

をため、ルータは、アプリのルートから現在のコンポーネント学童のルートを検索します。職員から

-

最初のルート名が./、/を先頭に追加、または../する必要があります。ルートが/で始まる場合、ルータはアプリのルートからルートをルックアップします。ルートが./で始まる場合、ルータは代わりに現在のコンポーネントの子プロセスでルートを探します。ルートが../で始まる場合、ルータは現在のコンポーネントの親を調べます。

詳細はこれを参照してください -

• https://angular.io/docs/ts/latest/api/router/RouterLink-directive.html

• How to use child routes in Angular 2。

• Angular 2 router examples + @RouteConfig typing support