即使在 Angular 中禁用按钮也能调用方法

Question

我有一个按钮，根据 Angular 中的某些条件被禁用。即使按钮被禁用，我也想启用

onclick

功能。请找到以下代码：

<button
  *ngIf="overrideSplitByAccountEnabled && 
  (!overrideSplitByaccountListOfAcc && 
  !overrideSplitByAccountGroupValue) || ((isStartTimeInputPresent && 
  !isValidStartTimestamp) || (isEndTimeInputPresent && 
  !isValidEndTimestamp))"
  type="button" class="btn btn-primary" 
  (click)="validateCustomReRunParameters()" disabled>
  <i class="glyphicon glyphicon-send" ></i>
  Send action
</button>

即使按钮被禁用，我也想启用单击

validateCustomReRunParameters()

我尝试单击，但由于按钮被禁用而无法工作。

Answer 1

您可以将

div

包裹在

button

周围，并将单击事件附加到该

div

。如果禁用该按钮，包装器

div

将采用

button

的宽度和高度。当用户点击禁用的

button

时，将触发

div

事件。如果启用

button

，

div

的宽度和高度将设置为 0。 像这样的东西：

<div (click)="validateCustomReRunParameters()">
  <button
    *ngIf="overrideSplitByAccountEnabled && 
    (!overrideSplitByaccountListOfAcc && 
    !overrideSplitByAccountGroupValue) || ((isStartTimeInputPresent && 
    !isValidStartTimestamp) || (isEndTimeInputPresent && 
    !isValidEndTimestamp))"
    type="button" class="btn btn-primary" 
    (click)="validateCustomReRunParameters()" disabled>
    <i class="glyphicon glyphicon-send" ></i>
    Send action
  </button>
</div>