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

Question

如果单击 [disabled] 按钮，我希望能够向元素添加 scss 类（“错误”）。我如何实现这一目标？ Angular2 禁用按钮[disabled] 属性是必需的，因此这不是一个可行的解决方案。

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

span 元素将通过 [ngClass] 接收的 scss 类：

 &.error {
  border: 2px solid red;
}

原文由 blixenkrone 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您无法监听禁用按钮上的点击事件。您可以向按钮添加一个禁用类，然后照常监听事件。请查看此 stackblitz： https ://stackblitz.com/edit/angular-3ksttt

零件：

 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>

原文由 Pete 发布，翻译遵循 CC BY-SA 3.0 许可协议