检查并添加类中的类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 ：

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");
    }
}

查看 addClass 函数内部的上述评论。

Answer 1

如果您使用的是Angular2路由器，则应利用 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

取决于您要在哪里添加IS-Active类，您可以更改它：

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

export class ReleasesDetailsComponent { 
    className: string = "";
    isActive = false;
    addClass(){
        if(isActive){
           isActive = false
        }else{
        isActive = true
        }
    }
}