单击禁用按钮时显示消息答案

【问题标题】：Show message on click of disabled button单击禁用按钮时显示消息
【发布时间】：2019-07-28 11:52:28
【问题描述】：

在我的 Angular 应用程序中，我有一个带有 [disabled]="isDisabled()" 的按钮。我希望在单击禁用按钮时显示一个弹出窗口。

我试图重叠一个可以检测点击的 span/div 并查看按钮是否被禁用。

这是我的代码：

//button becomes enabled if checkbox input is checked.
<button class="btnValider" id="rgpdValider" type="submit" [disabled]="isDisabled()"> Accédez au questionnaire</button>

这行不通

【问题讨论】：

您是否尝试过添加禁用的类（而不是禁用按钮），然后根据禁用的属性选择点击操作？例如(click)="disabled ? disabledReaction() : validerReaction()" 和你的类 ``[ngClass]="{ disabled: disabled }"` 然后是.disabled 类的一些css...

标签： angular onclick

【解决方案1】：

禁用的元素不会触发鼠标事件。

解决方案是使用 [ngClass] 并使按钮看起来好像它被禁用了。这是一个工作示例：

<button [ngClass]="'isDisabled()' ? 'disabled': false" (click)="alert()">Click</button>

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  title = "test-app";
  disabled = true;

  alert() {
    window.alert("hi");
  }

  isDisabled() {
    return true;
  }
}

.disabled {
  color: grey;
  opacity: 0.5;
}

【讨论】：

感谢您的帮助！问题是我不想更改不是我自己编写的现有代码。我害怕把其他事情搞砸。