Angular2：routeLinkはhref属性を作成しません

Question

3つの非常に基本的なコンポーネント：AppComponent,AdminComponentおよびLoginComponentがあります。 AppComponentとLoginComponentの両方にAdminComponentへのリンクがあります。 AppComponentにはrouter-outletとすべてのルーティング設定が含まれています。

角度レンダリング<a [routerLink]="['Admin']">Admin</a>〜<a href="/admin">Admin</a>AppComponent予期したとおりです。ただし、LoginComponentの全く同じリンクは<a>Admin</a>に表示されます。私は間違って何をしていますか？

角度バージョンが試されました：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に同様の質問に応じstumpled。 angle2-polyfill.jsは悪い少年です。 Thierry's modified plunkrここで、index.htmlからpolyfillを削除しました。

質問フォローアップ：

angular2-polyfillがAngular1

ため

Angular2のポリフィルとしての地位を宣言することは聞いて愚かなことかもしれませんが、私は本当にそれが必要なのでしょうか？明らかに、それは私のために問題を修正しましたが、これは角度1ではないので、私に悪い気持ちを与えてくれます...

Answer 1

あなたの問題は、 [ROUTER_DIRECTIVES]の代わりに[RouterLink]とします。

コードが表示されている場合、RouterLinkディレクティブは<a>以外のタグ用です。 <a>タグで動作するルータ・リンク・ディレクティブは、RouterLinkWithHrefです。

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

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