Angular2路由器链接无法正常工作

Question

如果我将链接移动到子组件,我的路由器链接将从根组件和相同的链接工作.plunker代码显示工作链接和非工作链接.先感谢您.以下是不起作用的链接.

//our root app component
import {Component} from '@angular/core'

@Component({
    selector: 'my-menu',
    template: `
    <div>
    <a routerLink="/comp11" routerLinkActive="active">Crisis Center</a> | 
    <a routerLink="/comp12" routerLinkActive="active">Heroes</a> | 
    <a routerLink="/comp21" routerLinkActive="active">Heroes</a> | 
    <a routerLink="/comp22" routerLinkActive="active">Heroes</a>
  </div>
`,
})
export class AppLayout {}

有问题的Plunker代码

Answer 1

您应该RouterModule在AppLayoutModule中导入,使其如下所示:

import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppLayout} from './layout.component';
import {RouterModule} from '@angular/router';

@NgModule({
    imports: [ BrowserModule, RouterModule ],
    declarations: [ AppLayout ],
    exports: [ AppLayout ]
})

export class AppLayoutModule {}

没有它组件不知道是什么,routerLink不编译它来纠正href属性.

在这里更新了Plunker