Angular2路由器链接不起作用答案

【问题标题】：Angular2 Router link not workingAngular2路由器链接不起作用
【发布时间】：2017-03-25 22:59:25
【问题描述】：

我的路由器链接从根组件工作，如果我将链接移动到子组件，相同的链接将无法工作。 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

【问题讨论】：

标签： angular angular2-routing angular2-template

【解决方案1】：

RouterModule 正在帮助消费组件将 routerLink(directive) 编译成正确的 href 属性。您可以通过两种方式解决此问题。

您应该在您的AppLayoutModule 和其他子模块中导入RouterModule，如下所示：

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

import { AppLayout } from './layout.component';

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

export class AppLayoutModule {}

否则只需在 SharedModule 中创建 SharedModule 并导入和导出 RouterModule。然后在您的子模块中导入 SharedModule（这是最好的方法）。您还可以在 SharedModule 中添加所有依赖模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule
  ],
  exports: [
    RouterModule
  ]
})
export class SharedModule { }

【讨论】：

【解决方案2】：

如果这是一个导入到模块中的独立组件，那么您也可以将 RouterModule 添加到模块的导入中。我喜欢在自己的文件中包含模块声明，因此这里的解决方案是拥有 app-module。

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {AppLayoutModule} from '...'; <--could also be a component

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        AppLayoutModule,
        BrowserModule,
        RouterModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {}

您唯一必须确定的是，RouterModule 被导入到使用 routerLink 指令的模块中，无论是在模块文件中还是在组件文件中。

【讨论】：

【解决方案3】：

您应该在 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

【讨论】：

嗨@Marcin，我很好奇，RouterModule 是在 AppRoutingModule 中导入的，它应该对所有其他功能模块可见，所以我错了吗？
@Howard，它是不可见的，因为模块不继承对其他模块的组件、提供程序等的访问。因此，AppModule 导入的内容对于 AppLayoutModule 来说是不可访问/可见的。
嗨@Marcin，感谢您的回答。这让我很困惑。因此，如果我有一个第三方模块 A 声明了很少的 components，你的意思是我不能在任何其他功能模块中使用它们，如果我只是 import 这个模块 A 进入根模块？有点奇怪，如果这个模块A需要forRoot的配置呢？我必须import & config 它在每个功能模块中都依赖它吗？
@Howard，是的，您必须在使用其中组件的每个功能模块中导入此第三方模块，因为它们之间没有继承。这种方法有几个原因，首先 - 由于延迟加载的可能性 - 您可以加载模块，以及它工作所需的组件，并且不必将它们加载到根模块中。另一个是，每个模块都应该以这样的方式实现，你可以在另一个应用程序 - 另一个父模块中重用它，所以它应该是自给自足的。我希望你现在更清楚了。
你知道吗？你拯救了我的周末 :-) 我有点失望，角度 (>=4) 似乎无法识别缺少的 RouterModule 并且默默地忽略了 routerLink 指令。

【解决方案4】：

为了让routerlink工作，你必须将Router导入你正在工作的组件

例子

Import {Component} from '@ angular / core';
Import {Router} from '@ angular / router';

@Component ({
Selector: 'my-menu',
template:
<Div>
<a [routerLink]=["/comp11"]> Crisis Center </a>
<a <routerLink]=["/comp12"]> Heroes </a>
<a [routerLink]=["/comp21"]> Heroes </a>
<a <routerLink]=["/comp22"]> Heroes </a>
</ Div>
,}) 
Export class AppLayout{}

谢谢！

【讨论】：