Question

I have problem with generated routing link in component from shared module.

导航菜单中有3个链接。当我点击“信息”时，页面显示正确，并且应该链接到健康。但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) { }
}

Angular2 RC5路由器3.0.0 - <a> in component from shared library

2 个答案: