angular 2 及更高版本中单击事件后如何在 li 上切换 class

Question

我有一个如下所示的无序列表。我想从以前激活的 li 元素中删除 active 和 arrow-down classes（以防我点击任何其他 li 元素）并想添加向上箭头class 去吧。此外，我想将 active 和 arrow-down class 添加到最近单击的 li 元素。在下面的代码中 link 1 默认激活。

<ul class="sibe-bar-menu">
    <li class="active arrow-down"><a href="#">1</a></li>
    <li class="arrow-up"><a href="#">2</a></li>
    <li class="arrow-up"><a href="#">3</a></li>
    <li class="arrow-up"><a href="#">4</a></li>
</ul>

我想在单击第 3 个 li 元素后获得如下代码。

<ul class="sibe-bar-menu">
    <li class="arrow-up"><a href="#">1</a></li>
    <li class="arrow-up"><a href="#">2</a></li>
    <li class="active arrow-down"><a href="#">3</a></li>
    <li class="arrow-up"><a href="#">4</a></li>
</ul>

Answer 1

您可以将 ngClass 与 clicked 结合使用。

在HTML中，给它们每一个添加一个click函数，就select吧。另外添加一个 ngClass 来显示相关的类如果它是 selected 的。

<ul class="sibe-bar-menu">
    <li [ngClass]="clicked === 0 ? 'active arrow-down' : 'arrow-up'" (click)="select(0)"><a href="#">1</a></li>
    <li [ngClass]="clicked === 1 ? 'active arrow-down' : 'arrow-up'" (click)="select(1)"><a href="#">2</a></li>
    <li [ngClass]="clicked === 2 ? 'active arrow-down' : 'arrow-up'" (click)="select(2)"><a href="#">3</a></li>
    <li [ngClass]="clicked === 3 ? 'active arrow-down' : 'arrow-up'" (click)="select(3)"><a href="#">4</a></li>
</ul>

最后，在后台创建select函数

clicked = 0;

select(i) {
  this.clicked = i;
}

Here is a StackBlitz demo

angular 2 及更高版本中单击事件后如何在 li 上切换 class

How to toggle a class on li after click event in angular 2 and above

angular

angular5

angular6