Angular2: routeLink nie tworzy atrybutu href

Question

Mam trzy bardzo podstawowe komponenty: AppComponent, AdminComponent i LoginComponent. Zarówno AppComponent, jak i LoginComponent pokazują link do AdminComponent. AppComponent zawiera router-outlet i całą konfigurację routingu.

Teraz z jakiegoś powodu kątowe renderuje <a [routerLink]="['Admin']">Admin</a> na <a href="/admin">Admin</a> w AppComponent zgodnie z oczekiwaniami. Jednak ten sam link w LoginComponent jest renderowany do <a>Admin</a>. Co ja robię źle?

Próbowano wersji kątowych: 2.0.0-beta.8 i 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 { 
} 

wyjściowy kod 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> 

---

Aktualizacja

porządku, po prostu stumpled na podobne pytanie na SO Issue with routerLink directive. Wygląda na to, że angular2-polyfill.js jest złym chłopcem. Zobacz Thierry's modified plunkr gdzie usunąłem polyfill z index.html.

Kontynuacja pytanie:

angular2-polyfill deklaruje się jako

Angular2 polyfill dla Angular1

To może być głupi, żeby zapytać, ale czy naprawdę potrzebny? Oczywiście to naprawiło problem dla mnie, ale daje mi to pewne złe przeczucia, ponieważ nie jest to kątowe 1. Dodatkowe ostrzeżenia o przestojach też nie pomagają ...

Answer 1

Myślę, że twój problem polega na tym, że ustawiasz swoje dyrektywy jako [RouterLink] zamiast [ROUTER_DIRECTIVES].

Jeśli widzisz ten kod, dyrektywa RouterLink dotyczy innych tagów innych niż <a>. Dyrektywa routera działająca z tagami <a> to RouterLinkWithHref.

Spójrz na kod w 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 { ... }