用户单击时添加/删除按钮类

【问题标题】：Add / Remove class of button when Clicked by user用户单击时添加/删除按钮类
【发布时间】：2021-08-13 00:29:03
【问题描述】：

我正在使用 Angular 12，我有一个按钮：

<button class="action">Sign In</button>

当用户点击它时，我需要添加一个 CSS 类，以便我可以更改它的样式。

当它停止被点击时，样式应该被移除。

我尝试过使用 CSS，但没有成功。我认为这是不可能的。

是否可以使用 Angular 指令来做到这一点？

【问题讨论】：

:active 是否符合您的期望？ developer.mozilla.org/en-US/docs/Web/CSS/:active
是的，button.action:active { /*do stuff to style*/} 会满足您的要求。

标签： css angular angular12

【解决方案1】：

从角度核心导入 ElementRef 并在构造函数中定义，然后尝试以下代码：

下面的代码行将为您提供组件中第一次出现的按钮标记。 querySelector 为您提供第一个项目，而 querySelectorAll 为您提供 DOM 中的所有项目。

import { Component, ElementRef } from "@angular/core";

constructor(private el: ElementRef) {
}

let myTag = this.el.nativeElement.querySelector("button");

添加类：

if(!myTag.classList.contains('myClass'))
{
    myTag.classList.add('myClass'); 
}

删除类：

myTag.classList.remove('myClass');

【讨论】：