檢查並添加類的標籤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

回答

相關問題