Question

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

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

scss类，span元素将通过[ngClass]收到：

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

Answer 1

在组件中创建一个布尔属性，即。 activeClass，听取按钮上的点击事件进行切换，然后根据布尔值使用ngClass分配类。

[ngClass]="'yourClass': activeClass"

修改

正确指出，您无法在禁用按钮上收听事件。解决方案是使用div包装元素并监听该元素上的事件（有关详细信息，请参阅this答案）或使用类来模拟禁用的效果。

Answer 2

在Angular中没有很好的方法可以做到这一点。 Angular的结构是这样的，除非在极少数情况下，否则你不应该手动检查DOM。如果您必须这样做，请查看this link，此接受的答案有一个可能对您有用的解决方案。

另一种方法可能是始终在点击时添加.error类，但构建您的sass，以便仅在.error出现时才会激活.disabled的属性。< / p>

例如：

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

然后在你的SASS中：

.disabled.error {
  //Your style here
}

Answer 3

如果您的按钮被禁用，那么它将不会监听(click)事件。在这种情况下，您可以做的一件事是使用css使其看起来像禁用，并在单击后启用disabled属性。< / p> 组件中的

：

clickedMe: boolean = false;

在您的HTML中：

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

你的css就像是：

.disableCss {
    background: #dddddd
}

Answer 4

您无法在禁用的按钮上侦听点击事件。您可以向按钮添加禁用的类，然后正常侦听事件。请查看此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>

Answer 5

每当按钮被禁用时，默认会添加一个 button:disabled 类。所以你可以把你的风格放在类中。如图：

button:disabled {
 background-color: #97929248;
 cursor: not-allowed;
}

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

5 个答案: