Angular 单击禁用按钮时显示消息

在我的angular应用程序中，我有一个带有[disabled]=“isDisabled（）”的按钮。 我想在单击禁用按钮时显示一个弹出窗口

我试图重叠一个span/div，该span/div将检测单击并查看按钮是否被禁用的id

这是我的代码：

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

//如果选中复选框输入，按钮将启用。
Accédez au调查问卷

它就是不起作用

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

解决方案是使用[ngClass]并使按钮显示为禁用状态。下面是一个工作示例：

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

---

您是否尝试过添加禁用的类（而不是禁用按钮），然后根据禁用的属性选择单击操作？例如

（单击）=“disabled？disabledReaction（）：validerReaction（）”

和您的带有“`[ngClass]=“{disabled:disabled}”的类，然后是

.disabled

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

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;
}