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

根据您要添加等待活动类的位置，您可以更改它：

<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 类。如果您使用它，则不再需要使用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>

检查并添加选项卡Angular2的类

2 个答案: