onClick 在 Angular 中添加活动类 - Javascript

在Angular中，可以在模板中通过 ngClass 或 ngStyle 指令来添加或移除class或style。但是，如果想基于用户点击事件来添加或移除类，则需要使用 (click) 事件绑定和自定义活动类。

实现步骤

1. 在组件的CSS文件中定义所需的活动类：

.active {
   background-color: #333;
   color: white;
}

2. 在组件的HTML文件中添加一个元素，并在元素中绑定 (click) 事件和 ngClass 指令：

<div (click)="toggleActive()" [ngClass]="{'active': isActive}">
   ... Content ...
</div>

在上面的代码中，我们绑定了 toggleActive() 方法到 (click) 事件上，并使用 ngClass 指令动态添加或移除 active 类。

3. 在组件的typescript文件中实现 toggleActive() 方法：

isActive = false;

toggleActive() {
   this.isActive = !this.isActive;
}

在上面的代码中，我们定义了一个名为 isActive 的变量，初始值为 false。当点击元素时，toggleActive() 方法会将 isActive 变量的值取反。这就是如何动态添加或移除 active 类的工作原理。

示例

下面是一个完整的示例，演示了如何基于 (click) 事件来添加或移除class：

<div (click)="toggleActive()" [ngClass]="{'active': isActive}">
   <p>Coucou !</p>
</div>

isActive = false;

toggleActive() {
   this.isActive = !this.isActive;
}

.active {
   background-color: #333;
   color: white;
}

结论

通过在 Angular 中绑定 (click) 事件和自定义活动类，可以轻松地实现基于用户点击事件的动态class添加或移除。这为构建交互式Web应用程序提供了更多的灵活性。