检查并添加 class 选项卡 Angular2

Question

我的 Angular2 应用程序中有 MDL 样式的选项卡。我需要的是检查选项卡是否有 class，如果没有，则在单击时添加 class。

我的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

根据您要添加 class 的位置，您可以更改它：

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


export class ReleasesDetailsComponent { 

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

        if(isActive){

           isActive = false
        }else{

        isActive = true

        }
    }

}

Answer 2

如果您使用 Angular2 路由器，您应该利用 routerLinkActive 指令。 路由器本身根据当前活动路由添加和删除is-active class。如果你使用它，你不需要再使用 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>

检查并添加 class 选项卡 Angular2

Check and add class for tabs Angular2

angular

tabs

material-design-lite