Html 如果单击禁用按钮，则通过ngClass添加类

如果单击[禁用]按钮，我希望能够将scss类（“错误”）添加到元素中。我如何做到这一点？ [disabled]属性是必需的，因此这不是一个有效的解决方案

<button [disabled]="!isTermAgreed || isLoading" (click)="payForStory(paymentObject.StoryId)">

---

在组件中创建一个布尔属性，即

activeClass

，侦听按钮上的单击事件以将其切换，然后只需使用

ngClass

根据布尔值分配类

[ngClass]=“yourClass”：activeClass”

编辑

---

正如正确指出的，您不能在禁用的按钮上侦听事件。解决这个问题的一个方法是用一个

div

包装元素，并监听该元素上的事件（有关更多详细信息，请参见答案），或者使用类来模拟禁用的效果。

在Angular中没有很好的方法可以做到这一点。Angular的构造方式使您不应该手动检查DOM，除非在极少数情况下。如果您必须这样做，请查看，这个公认的答案有一个可能对您有用的解决方案

另一种方法是总是在单击时添加

.error

类，但构建sass时，只有在同时存在

.disabled

时，

.error

的属性才会被激活

例如：

<button (click)="isError = true" [ngClass]="{error: isError}">My Button</button>

---

如果您的按钮被禁用，那么它将不会侦听

（单击）

事件，在这种情况下，您可以做的一件事是使用css使其看起来像禁用的，并在单击后启用禁用的属性

在您的组件中：

clickedMe: boolean = false;

在HTML中：

<button [disabled]="(!isTermAgreed || isLoading) && clickedMe" [ngClass]="{'disableCss': (!isTermAgreed || isLoading), 'error': clickedMe && (!isTermAgreed || isLoading)}"(click)="payForStory(paymentObject.StoryId); clickedMe = true">

---

无法在禁用的按钮上侦听单击事件。您可以向按钮添加一个禁用的类，然后按正常方式侦听事件。请查看此stackblitz：

组件：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  isButtonClicked: boolean = false;

  public disableButtonClick() {
    this.isButtonClicked = true;
  }
}

<button [ngClass]="isButtonClicked ? 'error' : ''" (click)="disableButtonClick()" class="disabled">BUTTON</button>

模板：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  isButtonClicked: boolean = false;

  public disableButtonClick() {
    this.isButtonClicked = true;
  }
}

<button [ngClass]="isButtonClicked ? 'error' : ''" (click)="disableButtonClick()" class="disabled">BUTTON</button>

按钮

我想到了这一点，但我的印象是，您无法收听禁用按钮上的单击事件？谢谢，这可能会起作用-正如这里有人所说，确实没有很好的方法可以做到这一点：-）CheersHow您是否可以添加禁用按钮上的单击事件的

.error

类？上面添加了一个示例。此代码不会取消按钮错误，您必须根据您的应用程序自行添加此逻辑。这可能会起作用，谢谢，我将实现并测试它。请查看更新的答案，如果您不想调用

payForStory（）的话，我忘了在按钮启用时删除
error
类

当禁用的条件为true时，您可以使用以下内容：

（单击）=“！（！isTermAgreed | | isLoading）？（payForStory（…）：”；clickedMe=true”

<button [ngClass]="isButtonClicked ? 'error' : ''" (click)="disableButtonClick()" class="disabled">BUTTON</button>