Question

我想在单击时向li添加活动和开放类，并再次单击以删除那些类

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

ts

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

Answer 1

您可以尝试

HTML

<li id="xx" [ngClass]="classFlag === true ? 'treeview' : '' " (click)="menuToggle($event)">
<li>

TS

 classFlag: boolean = false;
 menuToggle(event: any) {
    this.classFlag = !this.classFlag ;
 }

Answer 2

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

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

或者如果您想在组件文件中执行此操作（也许想添加更多逻辑）：

component.ts

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

template.html

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

Answer 3

我通过使用普通的旧JavaScript对其进行了修复：

// Find current active item
var myElement = document.getElementsByClassName('active');

// If found, remove the css class 'active'
if(myElement[0])
  myElement[0].classList.remove("active");

// Get the new active item
var currentElement = document.getElementById('message_' + messageId);
// Set the css class 'active'
currentElement.classList.add("active");

Answer 4

HTML：

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

组件：

menuToggle(event:any) {
  event.target.classList.add('class3'); // To ADD
  event.target.classList.remove('class1'); // To Remove
  event.target.classList.contains('class2'); // To check
  event.target.classList.toggle('class4'); // To toggle
}

Answer 5

您应提供一个“活动”属性，如下所示：

items = [
  {name:'a', active:false},
  {name:'b', active:false}
];

在模板内部：

<li *ngFor="let item of items" (click)="menuToggle(item)" [ngClass]="{'active': item.active}">{{ item.name }}</li>

最后，menuToggle（）方法仅切换所单击项目的活动状态：

menuToggle(){
 item.active = !item.active;
}

Answer 6

您可以尝试这些，无需为其编写特定功能

<li [ngClass]="classFlag ? 'treeview' : '' " (click)="classFlag ? classFlag = false : classFlag = true">test</li>

单击时如何添加成角度的remove（切换）类

6 个答案: