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

Posted 2023-03-13

【中文标题】如果单击禁用的按钮，则通过 ngClass 添加类

【英文标题】：Add class through ngClass if a disabled button is clicked

【发布时间】：2018-09-30 01:13:14

【问题描述】：

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

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

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

&.error 
  border: 2px solid red;

【参考方案1】：

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

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

【参考方案2】：

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

在您的组件中：

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

【讨论】：

这可能行得通，谢谢，我会实施并测试它。

请查看更新后的答案，当按钮启用时，我忘记删除 error 类

另外，如果您不想在禁用条件为真时调用payForStory()，那么您可以使用类似：(click)="!(!isTermAgreed || isLoading) ? (payForStory(...)): '' ; clickedMe = true"

【参考方案3】：

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

另一种方法是始终在单击时添加 .error 类，但构造您的 sass 以使 .error 的属性仅在 .disabled 也存在时才被激活。

例如：

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

然后在你的 SASS 中：

.disabled.error 
  //Your style here

【讨论】：

如何在禁用按钮的点击事件中添加.error 类？

在上面添加了一个示例。此代码不会取消按钮错误，您必须根据您的应用程序自己添加此逻辑。

【参考方案4】：

在您的组件中创建一个布尔属性，即activeClass，监听按钮上的单击事件以切换它，然后只需使用 ngClass 根据布尔值分配类。

[ngClass]="'yourClass': activeClass"

编辑

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

【讨论】：

我想到了这个，但我的印象是，您无法在禁用按钮上监听点击事件？

谢谢，这可能会奏效——正如这里有人所说，确实没有很好的方法来做到这一点:-) 干杯

【参考方案5】：

您无法侦听禁用按钮上的点击事件。您可以向按钮添加一个禁用的类，然后像往常一样监听事件。请查看此堆栈闪电战：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>