检查并添加选项卡Angular2的类答案

【问题标题】：Check and add class for tabs Angular2检查并添加选项卡Angular2的类
【发布时间】：2016-12-03 10:23:27
【问题描述】：

我的 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函数里面的注释。

【问题讨论】：

要突出显示当前的活动标签吗？

标签： angular tabs material-design-lite

【解决方案1】：

如果您使用 Angular2 路由器，您应该利用 routerLinkActive 指令。 Router 本身根据当前活动路由添加和删除 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>

【讨论】：

看来这就是我所需要的。但另一个问题是，在“代码”中，“IS-Active”类在单击代码中（我检查了Chrome控制台中的选项卡），但在选项卡具有类时，该样式不存在“可视化” “活跃”。你知道它有什么问题吗？
我没有正确理解您的问题。只需寻找正确的元素，希望样式的可视化就会出现。
我的意思是在代码中应用了“is-active”样式，但在视觉上，具有该样式的选项卡并未像该样式所暗示的那样进行装饰（该样式 100% 有效 - 检查了同一个应用程序）。
对不起，我很难理解你的问题！

【解决方案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

        }
    }

}

【讨论】：