在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;
}
发布于 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;
}
发布于 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);
}
}
也可以将其放入指令中;)
发布于 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;
}
希望这能有所帮助。
https://stackoverflow.com/questions/44535515
复制相似问题