Angular 8 如何在mat button启用时自动为其设置焦点

方案1：自定义通用自动聚焦指令（推荐，可复用，类似原生autofocus能力） #

这种方案不需要在业务代码里手动处理聚焦逻辑，只需给目标按钮添加指令即可自动生效。

第一步：创建指令 #

执行CLI命令生成指令：
ng generate directive directives/autofocus-when-enabled

第二步：编写指令逻辑 #

import { Directive, ElementRef, OnChanges, SimpleChanges, Input } from '@angular/core';

@Directive({
  selector: '[appAutofocusWhenEnabled]'
})
export class AutofocusWhenEnabledDirective implements OnChanges {
  // 绑定宿主元素的disabled属性，监听状态变化
  @Input() disabled: boolean;

  constructor(private el: ElementRef) {}

  ngOnChanges(changes: SimpleChanges): void {
    // 当disabled状态从true变为false时触发聚焦
    if (changes.disabled && !changes.disabled.currentValue && changes.disabled.previousValue) {
      // 延迟执行，等待DOM更新完成
      setTimeout(() => {
        const targetEl = this.el.nativeElement as HTMLElement;
        // 确保元素可见且未禁用时再聚焦
        if (!targetEl.disabled && targetEl.offsetParent !== null) {
          targetEl.focus({ preventScroll: false });
        }
      }, 0);
    }
  }
}

第三步：使用指令 #

在你的mat-button上直接添加指令即可，不需要额外修改业务逻辑：

<button 
  mat-raised-button 
  [disabled]="!submitEnabled" 
  appAutofocusWhenEnabled
>
  提交表单
</button>

方案2：业务代码直接处理（适合单场景使用，无需额外创建指令） #

如果你只需要在单个按钮上实现该逻辑，可以直接通过ViewChild获取按钮引用，在启用按钮的逻辑后延迟触发聚焦：

第一步：模板中给按钮加引用标识 #

<button 
  #submitBtn
  mat-raised-button 
  [disabled]="!submitEnabled"
>
  提交表单
</button>

第二步：业务逻辑中处理聚焦 #

import { ViewChild, ElementRef } from '@angular/core';

// 类中声明按钮引用
@ViewChild('submitBtn') submitBtn: ElementRef<HTMLButtonElement>;

// 服务端响应并验证条件的逻辑
handleServerResponse(res: any) {
  // 验证条件
  if (res.code === 0 && this.validateForm()) {
    this.submitEnabled = true;
    // 延迟执行聚焦，等待Angular变更检测更新DOM的disabled状态
    setTimeout(() => {
      this.submitBtn.nativeElement.focus();
    }, 0);
  }
}

之前方案不生效的原因 #

Angular的变更检测是批量异步执行的，你在服务端响应后把按钮启用状态设为true时，DOM上的disabled属性并不会立刻更新，此时直接调用focus()方法会因为元素仍处于禁用状态而被浏览器忽略。添加setTimeout(fn, 0)的作用是把聚焦操作放到下一个事件循环执行，等DOM更新完成后再触发，就可以正常生效。

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