[英]Angular2 link on component imported on core.module don't work
遵循有关docs的样式指南https://angular.io/styleguide#!#04-11 。 我使用简单的链接<a routerLink="hello">hello</a>
创建了app.component
,导航正常。 在另一方面,我创建header.component.ts
入口即化的core.module.ts
和core.module在进口app.module.ts
。 现在,只有header.component.ts
上的链接不起作用,我不知道为什么。
柱塞版本plnkr.co/edit/AsYNoWPWjNw5ZqpNZqta?p=preview
这是我的简化代码。
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { routing } from './app.routing';
import { CoreModule } from './core/core.module';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello/hello.component';
import { ByeComponent } from './bye/bye.component';
@NgModule({
imports:[
BrowserModule,
CoreModule,
routing
],
declarations:[
AppComponent,
HelloComponent,
ByeComponent
],
bootstrap:[ AppComponent ]
})
export class AppModule { }
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template:`
<div class="page">
<app-header></app-header>
<router-outlet></router-outlet>
those links works fine:
<a routerLink="hello">hello</a>
<a routerLink="bye">bye</a>
</div>
`
})
export class AppComponent {}
// core.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './header/header.component';
@NgModule({
imports: [
CommonModule
],
exports: [HeaderComponent],
declarations: [HeaderComponent],
providers: []
})
export class CoreModule { }
// header.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-header',
template:`<div style="border:1px solid red;">
this is header section, those links dont work:
<a routerLink="hello">hello</a>
<a routerLink="bye">about</a>
</div>
`
})
export class HeaderComponent{}
// simple page bye.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-bye',
template: `<p>
Page "Bye"
</p>
`
})
export class ByeComponent { }
//simple page hello.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-hello',
template:`<p>
Page "Hello"
</p>
`
})
export class HelloComponent {}
// app.routing.ts
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HelloComponent } from './hello/hello.component';
import { ByeComponent } from './bye/bye.component';
const appRoutes: Routes = [
{
path:'',
component:HelloComponent
},
{
path:'hello',
component:HelloComponent
},
{
path:'bye',
component:ByeComponent
}
]
export const routing:ModuleWithProviders = RouterModule.forRoot(appRoutes);
您忘记了将RouterModule导入到CoreModule中。 我相信您必须指定每个模块中使用的所有模块,因为它们应该是单独的,可重用的单元(理论上)。
请更改为:
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
@NgModule({
imports: [
CommonModule,
RouterModule
],
exports: [HeaderComponent],
declarations: [HeaderComponent],
providers: []
})
export class CoreModule { }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.