角型2を使用している場合にコンテンツ '... <span class = "sr-only">（現在）</span></a> `をHTMLリンクに追加する方法** routerLink **？

Question

角度2を使用すると、クリックしたアクティブリンクにどのように<span class="sr-only">(current)</span>が含まれているか知りたいだけですか？routerLink？

例：

<ul class="nav nav-sidebar"> 
    <li routerLinkActive="active"> 
     <a routerLink="/dashboard">Dashboard <span class="sr-only">(current)</span></a> 
    </li> 
    <li> 
     <a href="">Registers</a> 
    </li> 
    <li routerLinkActive="active"> 
     <a routerLink="/organizations">Organizations</a> 
    </li> 
</ul> 

出典：あなたはちょうど実際にアクティブなルートをマークしたい場合は、あなたのコンポーネントで Twitter Bootstrap > Accessibility > Skip navigation ANgular 2 > ROUTING & NAVIGATION

Answer 1

、あなたは、

@Component({ 
    selector: 'my-app', 
    template: ` 
<ul class="nav nav-sidebar"> 
    <li routerLinkActive="active"> 
     <a routerLink="/dashboard"> 
      Dashboard 
      <span *ngIf="isActiveLink('/dashboard')" class="sr-only">(current)</span> 
     </a> 
    </li> 
    <li> 
     <a href="">Registers</a> 
    </li> 
    <li routerLinkActive="active"> 
     <a routerLink="/organizations"> 
      Organizations 
      <span *ngIf="isActiveLink('/organizations')" class="sr-only">(current)</span> 
     </a> 
    </li> 
</ul> 
    `, 
    styleUrls: ['app/app.component.css'], 
}) 
export class AppComponent { 

    isActiveLink(link:string) { 
    return this.router.isActive(link); 
    } 

    constructor(private router:Router) {} 
} 

Answer 2

のような方法isActiveLinkを追加することができますディレクティブにrouterLinkActiveを追加するだけでs）、それはクラスactiveをアンカータグに追加するので、単純にCSSのアクティブリンクをスタイルすることができます。

<ul class="nav nav-sidebar"> 
    <li routerLinkActive="active"> 
     <a routerLink="/dashboard">Dashboard <span class="sr-only">(current)</span></a> 
    </li> 
</ul> 

あなたは、単にこれを使用して、それをスタイルすることができます：あなたはのようなものがある場合はノエミ・salaün@

nav-sidebar li:active { 
    background-color: #00CAFE; 
}