Angular2:routeLink不会创建href属性

Question

我有三个很基本的组成部分: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>

---

更新

好吧,我只是通过routerLink指令解决了类问题.看起来像angular2-polyfill.js是坏孩子.请参阅Thierry的修改过的plunkr,我从index.html中删除了polyfill.

跟进问题:

angular2-polyfill声明为

用于Angular1的Angular2 polyfill

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

Answer 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 { ... }