angular - Angular2 RC5 路由器 3.0.0 -共享库的组件中没有 href

Question

我在共享模块的组件中生成的路由链接有问题。

这是笨蛋。

导航菜单中有 3 个链接。当我单击“信息”时，页面正确显示，并且应该有指向Health的链接。但是 Angular 不解析模板和<a>标签，因为没有添加属性href。

相同的html代码

<a routerLink="/health">Health</a>

在菜单（其行为正确的地方）和LandingComponent模板中都使用。

我应该导入什么以及在哪里让两个链接都工作？

Answer 1

您的 LandingComponent 是 SharedModule 的一部分。因此，您必须将 RouterModule 导入 SharedModule 以使链接在您的 LandingComponent 中工作，这是 SharedModule 的正确代码：

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

import { LandingComponent } from './landing.component';

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

Answer 2

这将起作用，但更多的是一种解决方法，Dmitry Nehaychik 的回答是正确的。

import { Component, Input } from '@angular/core';
import { Router } from '@angular/router';
@Component({
    selector: 'landing',
    template: `
<div class="fgnp-panel">
    <h1>Page: {{pageTitle}}</h1>
    <a link (click)="router.navigate(['/Health'])" routerLinkActive="active">Health</a>
</div>`,
    styles: [`  a:link {text-decoration: none; color: blue;}a:visited {color: #EE9A00;}
                a:hover { text-decoration: underline;cursor: pointer;}`]
})
export class LandingComponent {
    @Input()
    pageTitle: string = '';

    constructor(private router: Router) { }
}