Angular2路由器链接不起作用 | Angular2路由器链接不起作用

本文介绍了Angular2路由器链接不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的路由器链接从根组件开始工作，并且如果将链接移到子组件，则同一链接不起作用.插入代码显示工作链接和非工作链接.先感谢您.以下是无效链接.

My router link works from the root component and the same link not working if I move the links to child component. The plunker code shows the working link and non working link. Thank you in advance. The below is the not working links.

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

有问题的柱塞代码

推荐答案

您应该在AppLayoutModule中导入RouterModule，以便其外观如下:

You should import RouterModule in your AppLayoutModule so it looks as follows:

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属性.

Without it component didn't know what the routerLink is and do not compile it to correct href attributes.

更新的Plunker 此处

Updated Plunker here

这篇关于Angular2路由器链接不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！