如何仅使用Angular6在单击按钮上设置活动类？

Question

我连续有3个按钮。我只想在单击的按钮上设置活动课，但问题是当我在一个按钮后单击另一个按钮时，它正在所有按钮上设置活动课。

设置活动类无法正常工作。单击所有按钮都会激活活动的类。如果我单击2个按钮，则单击时将同时在两个按钮上设置活动课程。

这是我在stackblitz上的代码

StackBlitz Code

我想一次只在单击的按钮上设置活动班级，而不是在所有按钮上设置。

Answer 1

我认为您可以通过角度dom功能更轻松地做到这一点。

您可以在这里显示：

https://stackblitz.com/edit/angular-s8suc8?file=src/app/app.component.ts

我认为您想要的是一个示例，但我认为您可以做得更好：

https://stackblitz.com/edit/angular-vmzijo?file=src/app/app.module.ts

Answer 2

据我了解，您需要打开活动和不活动状态：

这是新的插头，看看是否可以解决问题：

https://stackblitz.com/edit/angular-fzxhkv?file=src/app/app.component.ts

我删除了负责在每个按钮上应用event.srcElement.classList.add('phase-active')的{​​{1}}