单击时如何以角度添加删除(切换)类 [英] How to add remove (toggle) class in angular when clicked

问题描述

我想在单击时向 li 添加活动和打开的类，如果再次单击则删除这些类

I want to add active and open classes to the li when clicked and remove those classes if clicked again

 <li id="xx" class="treeview" (click)="menuToggle($event)">
 <li>

ts

 menuToggle(event: any) {
  this.renderer.addClass()
}

推荐答案

您可以使用模板引用变量来切换模板中的类:

You can use template reference variable to toggle classes in template:

<li #myLi class="treeview" (click)="myLi.classList.toggle('my-class')"><li>

<小时>

或者如果你想在组件文件中做(也许如果你想添加更多逻辑):

---

Or if you want to do it in the component file (maybe if you want to add more logic):

component.ts

component.ts

toggleClass = (event) => {
    event.target.classList.toggle('my-class');
}

模板.html

<li class="treeview" (click)="toggleClass($event)"><li>

这篇关于单击时如何以角度添加删除(切换)类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！