Angular 12中编程设置Angular Material复选框焦点无效如何解决

• Angular 6 之后的 Angular Material 版本（含你使用的 v12 版本）重构了表单控件的焦点管理逻辑，新增FocusMonitor服务统一接管组件焦点状态。你在按钮点击的回调里同步调用focus()方法时，当前点击事件的焦点还停留在按钮上，FocusMonitor会拦截这次跨组件的焦点跳转请求，加上此时Angular变更检测还未执行完成，设置的焦点会被组件重绘逻辑覆盖。
• 若@ViewChild查询未指定正确的类型，或复选框被*ngIf等结构指令控制显隐时查询时机不对，会导致拿不到正确的MatCheckbox实例，调用方法自然无效。

方案1：异步延后焦点调用，避开当前事件周期 #

将焦点设置逻辑放到下一个宏任务队列中执行，等当前点击事件收尾、Angular变更检测完成后再触发焦点设置，不需要设置延迟时长：

// 按钮点击绑定的方法内
setTimeout(() => {
  this.chk.focus();
});

如果项目使用RxJS，也可以用timer(0)实现同等效果，注意做好订阅回收。

方案2：直接操作原生input元素，绕过组件焦点拦截 #

如果不想引入异步逻辑，可以直接操作复选框内部的原生可聚焦input元素，触发原生焦点事件：

1. 首先修正@ViewChild查询，明确指定查询的组件类型，避免拿错实例：

import { MatCheckbox } from '@angular/material/checkbox';

// 若复选框默认是隐藏的（由*ngIf控制显隐），记得加static: false配置
@ViewChild('maaz', { static: false }) chk: MatCheckbox;

2. 在点击回调中直接取内部原生input调用焦点方法：

this.chk._inputElement.nativeElement.focus();

说明：_inputElement是MatCheckbox实例暴露的内部原生元素引用，若担心跨大版本兼容性问题，也可以通过DOM查询拿input元素：

const nativeCheckbox = this.chk.elementRef.nativeElement.querySelector('input[type="checkbox"]');
nativeCheckbox?.focus();

• 模板引用位置校验：#maaz必须直接绑定在<mat-checkbox>标签上，不能绑定在复选框外层的普通DOM容器上
• 渲染时机校验：若复选框初始状态为隐藏，必须等*ngIf条件为true、组件渲染完成后再调用焦点方法，否则会拿不到组件实例报错

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