检查并添加类的标签Angular2

我有MDL风格的标签在我的Angular2应用程序。我需要的是检查一个选项卡是否有类，如果它没有，然后点击添加该类。检查并添加类的标签Angular2

我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内部的注释功能。

来源

2016-12-03 Alexandr Belov

要突出显示当前活动选项卡吗？ – micronyks

如果您正在使用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>

来源

2016-12-03 10:41:03 micronyks

这似乎就是我需要的。但另一个问题是点击代码中应用的“is-active”类（我检查了Chrome控制台中的选项卡），但没有可视化选项，当选项卡具有该类时，应该应用该样式“活跃”。你知道它有什么问题吗？ –

我不明白你的问题。只要寻找正确的元素，并希望风格的可视化将在那里。 – micronyks

我的意思是代码中应用了“is-active”风格，但在视觉上，该风格的选项卡没有按照该风格所暗示的那样进行装饰（样式是100％正常工作 - 检查同一应用中的其他元素）。 –

根据你要新增类是活跃的，你可以改变它：

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


export class ReleasesDetailsComponent { 

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

     if(isActive){ 

      isActive = false 
     }else{ 

     isActive = true 

     } 
    } 

}

来源

2016-12-03 10:27:55 Milad

检查并添加类的标签Angular2

回答

相关问题