Angular2：routeLink 不创建 href 属性答案

【问题标题】：Angular2: routeLink does not create href attributeAngular2：routeLink 不创建 href 属性
【发布时间】：2016-03-17 13:01:15
【问题描述】：

我有三个非常基本的组件：AppComponent、AdminComponent 和 LoginComponent。 AppComponent 和 LoginComponent 都显示指向 AdminComponent 的链接。 AppComponent 包含router-outlet 和所有路由配置。

现在由于某种原因，角度将<a [routerLink]="['Admin']">Admin</a> 渲染为<a href="/admin">Admin</a> 中的AppComponent，正如预期的那样。但是，LoginComponent 中的完全相同的链接将呈现给<a>Admin</a>。我做错了什么？

尝试的 Angular 版本：2.0.0-beta.8 和 2.0.0-beta.9。

app.component.ts

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';

import {AdminComponent} from './admin.component';
import {LoginComponent} from './login.component';

@Component({
  selector: 'ww-app',
  template: `
    <a [routerLink]="['Admin']">Admin</a>             // This link works as expected

    <router-outlet></router-outlet>
  `,
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  { path: '/login', component: LoginComponent, name: 'Login', useAsDefault: true },
  { path: '/admin', component: AdminComponent, name: 'Admin' }
])
export class AppComponent {
}

login.component.ts

import {Component} from 'angular2/core';
import {RouterLink} from 'angular2/router';

@Component({
  selector: 'ww-login',
  directives: [RouterLink],
  template: `
    <div>
      <a [routerLink]="['Admin']">Admin</a>        // Renders <a>Admin</a>
      <div>login box </div>
    </div>
  `
})
export class LoginComponent {
}

呈现的 HTML 输出

<ww-app>
  <a href="/admin">Admin</a>          <!-- link as expected (AppComponent)-->
  <router-outlet></router-outlet>
  <ww-login _ngcontent-nky-2="">
    <div>
      <a>Admin</a>                    <!-- href is missing here (LoginComponent)-->
      <div>login box </div>
    </div>
  </ww-login>
</ww-app>

更新

好吧，我刚刚在Issue with routerLink directive 上偶然发现了一个类似的问题。看起来 angular2-polyfill.js 是个坏孩子。请参阅Thierry's modified plunkr，我从 index.html 中删除了 polyfill。

跟进问题：

angular2-polyfill 声明自己为

Angular1 的 Angular2 填充

问起来可能很愚蠢，但我真的需要吗？显然它为我解决了一个问题，但它给了我一种不好的感觉，因为这不是 Angular 1。额外的弃用警告也无济于事......

【问题讨论】：

你用的是哪个版本的Angular2？
听起来与这个问题相似 github.com/angular/angular/issues/6358 ，但我不是 100% 确定。
@ThierryTemplier：我目前使用的是 2.0.0-beta.9。也发生在 beta 8 中。
我试图在这个 plunkr 中重现您的问题但没有成功：plnkr.co/edit/I3XaEcXfJLfOi1Zws1Rk?p=preview。你能提供一个重现问题的plunkr吗？谢谢！
不需要天使！

标签： angular angular2-routing

【解决方案1】：

我认为您的问题是您将指令设置为 [RouterLink] 而不是 [ROUTER_DIRECTIVES]。

如果您看到代码，RouterLink 指令用于不同于<a> 的其他标签。与<a> 标签一起使用的路由器链接指令是RouterLinkWithHref。

看看https://github.com/angular/angular/blob/master/modules/%40angular/router/src/directives/router_link.ts中的代码

@Directive({selector: ':not(a)[routerLink]'})
export class RouterLink { ... }

@Directive({selector: 'a[routerLink]'})
export class RouterLinkWithHref implements OnChanges, OnDestroy { ... }

【讨论】：