Question

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

我尝试重叠一个span / div，该间距/ div可以检测到单击并查看是否已禁用该按钮。

这是我的代码：

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

那是行不通的

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

单击禁用按钮显示消息

1 个答案: