OnClick检查、删除和添加angular13中的类名

Question

我想将类名'active‘onClick添加到'li a’&还可以删除'li a‘上的任何’活动‘类。如果单击顶部元素中的序列，当前代码将正常工作，但当我从下到上单击元素时，它将无法工作。

1. component.html

<div class="container text-center">
  <ul id="myList" class="pt-5">
    <li class="p-3">
      <a href="#" class="d-inline-block" (click)="linkActive($event)">List 1</a>
    </li>
    <li class="p-3">
      <a href="#" class="d-inline-block" (click)="linkActive($event)">List 2</a>
    </li>
  </ul>
</div>

1. component.ts

linkActive(event) {
    const activeClass = event.srcElement.classList.contains('active');
    const classFound = document.querySelector('li a');
    const hpn = classFound.classList.contains('active');
    if (activeClass == true) {
      if (hpn == true) {
        classFound.classList.remove('active');
      }
      alert('true');
      event.srcElement.classList.remove('active');
    } else {
      if (hpn == true) {
        classFound.classList.remove('active');
      }
      alert('false');
      event.srcElement.classList.add('active');
    }
  }

请查找示例代码：https://stackblitz.com/edit/angular-ivy-jf9xvp

Answer 1

不要像这样直接操作DOM，您可以使用ngClass实现所需的结果：

模板：

<a href="#" class="d-inline-block" [ngClass]="{'active': activeList === 1}" (click)="linkActive(1)">List1</a>

.ts

public activeList: number;

..。

public linkActive(listNumber: number) {
   this.activeList = listNumber; 
}

通常，按照注释中的建议，做英雄教程并尝试理解如何使用类型记录。