Angular中事件目标委托下按钮无法正常禁用问题

可能的原因 #

1. DOM元素引用不准确：你使用的$event.target可能不是实际的按钮元素（比如按钮内部有嵌套元素时，事件冒泡会导致target指向子元素），导致设置disabled的对象错误。
2. Angular中直接操作DOM的局限性：Angular更推荐通过绑定组件属性来控制元素状态，直接操作DOM可能会和Angular的变更检测机制冲突，导致状态更新不生效。

解决方案 #

方案一：改用组件属性绑定（推荐） #

这是Angular的标准做法，避免直接操作DOM：

1. 修改HTML模板，添加模板引用变量和禁用状态绑定：

<button #submitBtn (click)="setSubmitting(submitBtn, 'submitting')" [disabled]="isBtnDisabled">submit</button>

2. 在组件中定义控制状态的属性，并修改方法：

isBtnDisabled = false;

setSubmitting(element: HTMLElement, text: string){
  element.textContent = text;
  // 执行Toaster弹出逻辑
  this.toasterService.show("Submitting Now");
  // 通过组件属性控制按钮禁用
  this.isBtnDisabled = true;
}

方案二：修正DOM元素引用 #

如果坚持直接操作DOM，将$event.target替换为$event.currentTarget，确保获取的是绑定点击事件的按钮元素：

修改HTML：

<button (click)="setSubmitting($event.currentTarget, 'submitting')">submit</button>

组件方法无需其他修改，此时element会准确指向按钮，设置element.disabled = true即可生效。

内容的提问来源于stack exchange，提问作者JSLover