Angular ngClass和Click事件切換類

在Angular中，我想使用ngClass和click事件來切換類。我通過網上看了一下，但有些是角度1，並沒有任何明確的指示或例子。任何幫助都感激不盡！Angular ngClass和Click事件切換類

在HTML中，我有以下：

<div class="my_class" (click)="clickEvent($event)" ngClass="{'active': toggle}">     
    Some content 
</div>

在.TS：

clickEvent(event){ 
    //Haven't really got far 
    var targetEle = event.srcElement.attributes.class;   
}

來源

2017-06-14 steve Kim

這是角1嗎？看起來不像那個 –

它是角度2。我會改變標題。 –

標題很好。我改變了你的問題的標籤 –

這應該爲你工作：

<div class="my_class" (click)="clickEvent()" 
    [ngClass]="status ? 'success' : 'danger'">     
    Some content 
</div> 

status: boolean = false; 
clickEvent(){ 
    this.status = !this.status;  
}

來源

2017-06-14 04:41:33

謝謝！學到了一些東西！ =） –

只是一個簡單的問題。第一次點擊很好地添加了類，但第二次點擊似乎不起作用。從你的代碼中，我沒有看到它是如何將'status'改回false。 –

nvm。弄清楚了。謝謝！ –

ngClass應包裹在方括號中，因爲這是一個屬性綁定。試試這個：

<div class="my_class" (click)="clickEvent($event)" [ngClass]="{'active': toggle}">     
    Some content 
</div>

在您的組件：

 //define the toogle property 
    private toggle : boolean = false; 

    //define your method 
    clickEvent(event){ 
     //if you just want to toggle the class; change toggle variable. 
     this.toggle != this.toggle;  
    }

希望有所幫助。

來源

2017-06-14 04:40:44

太棒了。謝謝！ –

很高興我能幫到你。如果它適合你，請將答案標記爲已接受。 –

變量可以在模板中像這樣進行切換 -

<div class="my_class" (click)="status=!status" 
    [ngClass]="status ? 'success' : 'danger'">     
    Some content 
</div>

這無助於TS文件任何額外的代碼工作。

來源

2018-01-30 11:52:39 charsi

Angular ngClass和Click事件切換類

回答

相關問題