angular2中的嵌套路由不起作用

例如。我有兩個文件：

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

當[routerLink]定義app.component.ts代替link111標記它的工作原理，但是當我將它分成不同的文件時它不起作用。

請幫助我，謝謝。

來源

2016-04-27 user6250958

當[routerLink]在app.component.ts中定義代替link111標記時，它可以工作，因爲角色從主根文件（也就是app.ts在你的情況下）的路由，但是當你將它分成不同的文件它不起作用，因爲比路由在根文件中定義，但你是從childern（即不是從父母）調用。所以要解決這個改變這種類似這樣的 -

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

，因爲如果路由以./開頭，路由器會查找當前組件子女路線從應用程序的根目錄。

從官員 -

第一條路線名稱應與/預加，./或../。如果路由以/開頭，則路由器將從應用的根目錄查找路由。如果路由以./開頭，則路由器將查找當前組件的子路由。如果路由以../開頭，則路由器將查看當前組件的父節點。

更多信息請參閱本 -

來源

2016-04-27 11:10:24

更改爲你上面給出的鏈接，URL變化，但組件模板不會改變。 – user6250958

你得到的錯誤是什麼？你能在plunkr上重現你的問題嗎？ –

我已更新答案希望它可以幫助你 –

angular2中的嵌套路由不起作用

回答

相關問題