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'; }

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模板中使用此功能？

更新：

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

无法绑定到＆＃rou; routerlink＆＃39;因为它不是＆＃39; a＆＃39;
的已知属性

谢谢！

Answer 1

您可以尝试这样：

export GNUMAKEFLAGS=-j9

您可以根据路由嵌套层次结构更改数组<a [routerLink]="[ '/', 'contact' ]" routerLinkActive="active">Contact</a>的第一个值。并使用[routerLink]="[ '..', 'contact' ]"

将RouterModule添加到app.module.ts

imports

希望这对你有用。

Answer 2

原来我使用了gulp-htmlmin，html-minifier又使用routerlink，其中default setting for camelCase attributes is set to false。因此，更新的错误消息显示routerLink而不是UIBezierPath。非常微妙的问题所以希望这对任何人都有帮助！

如何在HTML模板中使用RouterLink

2 个答案: