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

Question

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

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

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

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

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>