Angular2 RC5 路由器 3.0.0 - 共享库组件中 <a> 中没有 href

Question

我在共享模块的组件中生成路由 link 时遇到问题。

这里是 plunker.

导航菜单中有 3 个 link。当我点击 "Information" 页面正确显示时，应该有 link 到 Health。但是 Angular 不解析模板，并且 <a> 标签没有添加属性 href。

相同html代码

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

用于菜单（正确运行的地方）和 LandingComponent 模板。

我应该导入什么以及导入到哪里才能让两个 link 正常工作？

Answer 1

这会起作用，但更多的是解决方法，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) { }
}

Answer 2

您的 LandingComponent 是 SharedModule 的一部分。因此，您必须将 RouterModule 导入 SharedModule 以使 link 在您的 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 { }

Angular2 RC5 路由器 3.0.0 - 共享库组件中 <a> 中没有 href

Angular2 RC5 router 3.0.0 - no href in <a> in component from shared library

angular2-routing

angular2-router3

angular