单击时的toogle类，而没有每个元素的功能

Question

让我们说我喜欢：

<div (click)="toggleMe()" [class.toggled]="something"></div>
<div (click)="toggleMe()" [class.toggled]="something"></div>
<div (click)="toggleMe()" [class.toggled]="something"></div>

我想在单击的div上切换类，但是我不想在每个div的组件中创建不同的变量。我该怎么解决？

使用jQuery，我将执行以下操作：

$("div").click(function() {
    $(this).toggleClass("toggled");
});

现在，无论我要添加多少，这将适用于每个div。在Angular中有与此等效的东西吗？也许像this引用一样？

Answer 1

如果您不想为div元素创建特定的变量，则可以使用event.target事件的click属性来引用HTML元素，并使用{{ 1}}：

element.classList.toggle("toggled")

<div (click)="toggleMe($event)">Div1</div>
<div (click)="toggleMe($event)">Div2</div>
<div (click)="toggleMe($event)">Div3</div>

有关演示，请参见this stackblitz。