用于切换类的Angular ngClass和单击事件
用于切换类的Angular ngClass和单击事件
提问于 2017-06-14 12:35:29
在Angular中，我想使用ngClass和单击事件来切换类。我在网上看了看，但有些是angular1的，没有任何明确的说明或示例。任何帮助都将不胜感激！
在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;
}回答 7
Stack Overflow用户
回答已采纳
发布于 2017-06-14 12:41:33
这对你来说应该是可行的。
在.html中：
<div class="my_class" (click)="clickEvent()"
[ngClass]="status ? 'success' : 'danger'">
Some content
</div>在.ts中：
status: boolean = false;
clickEvent(){
this.status = !this.status;
}Stack Overflow用户
发布于 2018-08-17 18:44:30
使用不带任何变量和干净模板的renderer2的Angular6：
模板：
<div (click)="toggleClass($event,'testClass')"></div>在ts中：
toggleClass(event: any, className: string) {
const hasClass = event.target.classList.contains(className);
if(hasClass) {
this.renderer.removeClass(event.target, className);
} else {
this.renderer.addClass(event.target, className);
}
}也可以将其放入指令中;)
Stack Overflow用户
发布于 2017-06-14 12:40:45
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;
}希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44535515
复制相关文章
相似问题