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

发布时间：2020-12-17 09:28:59 所属栏目：安全来源：网络整理

导读：如果我将链接移动到子组件,我的路由器链接将从根组件和相同的链接工作. plunker代码显示工作链接和非工作链接.先感谢您.以下是不工作的链接. //our root app componentimport {Component} from '@angular/core'@Component({ selector: 'my-menu',template: `

如果我将链接移动到子组件,我的路由器链接将从根组件和相同的链接工作. 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 code with issue

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

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 here

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!