如何在 HTML 模板中使用 RouterLink

Question

Angular 2.3.0

我像这样定义了一个 Angular 2 模块：

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

import { AppComponentRoute }  from './components/+app/index';
import { AppComponent }  from './components/+app/app.component';
import { HomeComponentRoute } from './components/+home/index';
import { HomeComponent }  from './components/+home/home.component';
import { ContactComponentRoute } from './components/+contact/index';
import { ContactComponent }  from './components/+contact/contact.component';

let app_routes: Routes = new Array();
    app_routes.push(AppComponentRoute);
    app_routes.push(HomeComponentRoute);
    app_routes.push(ContactComponentRoute);

@NgModule({
    imports:[
        BrowserModule,
        RouterModule.forRoot(app_routes)
    ],
    declarations: [
        AppComponent,
        HomeComponent,
        ContactComponent
    ],
    bootstrap:[
        AppComponent
    ]
})

主页Component看起来像这样：

home.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'home',
    templateUrl: `./app/components/+home/home.component.html`
})

export class HomeComponent  { name = 'Home'; }

主页.component.html

<nav>
    <a routerLink="/contact" routerLinkActive="active">Contact</a>
</nav>
<router-outlet></router-outlet>

问题是routerLink在单独的.html文件中不起作用。但是，当我定义内联模板时，我可以像这样使用它：

@Component({
    selector: 'home',
    template: `
        <nav>
            <a routerLink="/contact" routerLinkActive="active">Contact</a>
        </nav>
        <router-outlet></router-outlet>
    `
})

我如何让它在单独的.html模板中工作？

更新：

我意识到我忘记了我得到的错误：

无法绑定到“routerlink”，因为它不是“a”的已知属性。

谢谢！

Answer 1

你可以这样试试：

<a [routerLink]="[ '/', 'contact' ]" routerLinkActive="active">Contact</a>

您可以[routerLink]="[ '..', 'contact' ]"根据路由嵌套层次结构更改数组的第一个值。并添加RouterModule到app.module.tsusing 中imports：

@NgModule({
  imports: [
    RouterModule,
    ...
    ]

希望这对你有用。