typescript 如何在 HTML 模板中使用 RouterLink
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41100052/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use RouterLink in HTML template
提问by Nicky
Angular 2.3.0
Angular 2.3.0
I defined an Angular 2 module like so:
我像这样定义了一个 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
]
})
The Home Componentlooks like this:
主页Component看起来像这样：
home.component.ts
主页.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
主页.component.html
<nav>
<a routerLink="/contact" routerLinkActive="active">Contact</a>
</nav>
<router-outlet></router-outlet>
The problem is that routerLinkis not working in the seperate .htmlfile.
However, when I define the template inline, I can use it like so:
问题是routerLink在单独的.html文件中不起作用。但是，当我定义内联模板时，我可以像这样使用它：
@Component({
selector: 'home',
template: `
<nav>
<a routerLink="/contact" routerLinkActive="active">Contact</a>
</nav>
<router-outlet></router-outlet>
`
})
How do I get this to work in the seperate .htmltemplate?
我如何让它在单独的.html模板中工作？
UPDATE:
更新：
I realized I forgot the error I'm getting:
我意识到我忘记了我得到的错误：
Can't bind to 'routerlink' since it isn't a known property of 'a'.
无法绑定到“routerlink”，因为它不是“a”的已知属性。
Thanks!
谢谢！
回答by Avnesh Shakya
You can try like this:
你可以这样试试：
<a [routerLink]="[ '/', 'contact' ]" routerLinkActive="active">Contact</a>
You can change first value of array [routerLink]="[ '..', 'contact' ]"based on your routing nested hierarchy. And add RouterModuleinto app.module.tsusing imports:
您可以[routerLink]="[ '..', 'contact' ]"根据路由嵌套层次结构更改数组的第一个值。并添加RouterModule到app.module.tsusing 中imports：
@NgModule({
imports: [
RouterModule,
...
]
Hope this will work for you.
希望这对你有用。
回答by Nicky
Turns out I use gulp-htmlmin, which in turn uses html-minifier, where the default setting for camelCase attributes is set to false. Hence the updated error message saying routerlinkinstead of routerLink. Very subtle issue so hope this helps to anyone!
结果我使用gulp-htmlmin，而后者又使用html-minifier，其中camelCase 属性的默认设置设置为false。因此更新的错误消息说routerlink而不是routerLink. 非常微妙的问题，所以希望这对任何人都有帮助！
