タブのクラスを確認して追加するAngular2

Question

私のAngular2アプリにはMDLというスタイルのタブがあります。そして私が必要とするのは、タブにクラスがあるかどうかをチェックし、それがクリックでそのクラスを追加しない場合です。

マイcomponent.html：

<div class="releases-list-component"> 

<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect"> 

    <div class="mdl-tabs__tab-bar"> 
     <a routerLink="albums" class="mdl-tabs__tab" (click)="addClass()">Albums</a> 
     <a routerLink="splits" class="mdl-tabs__tab" (click)="addClass()">Splits</a> 
     <a routerLink="tributes" class="mdl-tabs__tab" (click)="addClass()">Tributes</a> 
    </div> 

</div> 

<router-outlet></router-outlet> 

マイcomponent.ts：addClass関数内で上記のコメントで

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'releases-details', 
    templateUrl: 'app/releases/releases-details.component.html' 
}) 

export class ReleasesDetailsComponent { 

    className: string = ""; 

    addClass(){ 
     //??? this.hasClass("is-active")?this.removeClass("is-active"):this.addClass("is-active"); 
    } 

} 

ルック。あなたがのクラスを追加したいと思います場所によって

Answer 1

あなたはrouterLinkActiveディレクティブを活用すべきです。 ルータ自体は、現在のアクティブなルートに基づいて、is-activeクラスを追加して削除します。 これを使用する場合は、もうclickイベントを使用する必要はありません。

<div class="mdl-tabs__tab-bar"> 
     <a routerLink="albums" routerLinkActive="is-active" class="mdl-tabs__tab">Albums</a> 
     <a routerLink="splits" routerLinkActive="is-active" class="mdl-tabs__tab" >Splits</a> 
     <a routerLink="tributes" routerLinkActive="is-active" class="mdl-tabs__tab" >Tributes</a> 
    </div> 

Answer 2

は、アクティブあなたはそれを変更することができます：あなたはAngular2ルーターを使用している場合

<div class="releases-list-component" [class.is-active]='isActive'> 


export class ReleasesDetailsComponent { 

    className: string = ""; 
    isActive = false; 
    addClass(){ 

     if(isActive){ 

      isActive = false 
     }else{ 

     isActive = true 

     } 
    } 

}