Angular 5中如何移除disabled属性并聚焦输入框？

我懂你碰到的这个坑了——明明已经把disabled属性删掉了，输入框却还是没法聚焦，确实挺让人头疼的。这本质上是Angular变更检测的时机问题：当你用renderer.removeAttribute直接操作DOM后，Angular的变更检测周期还没走完，DOM的实际状态还没同步更新，这时候调用focus()，元素其实还处于禁用状态（或者说DOM还没反应过来属性已经被移除），所以聚焦就失败了。

给你几个靠谱的解决方案，按推荐程度排序：

1. 用属性绑定替代直接DOM操作（最Angular的方式） #

尽量避免直接操作DOM，改用Angular的数据驱动方式控制禁用状态：

首先在组件里定义一个控制变量：

isInputDisabled = true;
@ViewChild('input') input!: ElementRef;

模板里绑定disabled属性：

<input #input [disabled]="isInputDisabled" type="text">
<button (click)="enableAndFocus()">启用并聚焦</button>

然后在点击方法里，先更新变量，再等DOM同步后聚焦：

enableAndFocus() {
  this.isInputDisabled = false;
  // 用setTimeout把focus放到下一个事件循环，确保DOM已更新
  setTimeout(() => {
    this.input.nativeElement.focus();
  }, 0);
}

2. 手动触发变更检测后再聚焦 #

如果你一定要保留直接操作DOM的方式，可以用ChangeDetectorRef手动触发变更检测，确保DOM先同步更新：

先注入ChangeDetectorRef：

constructor(private renderer: Renderer2, private cdr: ChangeDetectorRef) {}

然后修改你的方法：

enableAndFocus() {
  this.renderer.removeAttribute(this.elRef.nativeElement, 'disabled');
  // 手动触发变更检测，让Angular同步DOM状态
  this.cdr.detectChanges();
  // 现在再调用focus就生效了
  this.input.nativeElement.focus();
}

3. 用setTimeout延迟执行focus #

最简单的应急方案，利用setTimeout把focus调用放到下一个事件循环，等Angular完成变更检测和DOM更新后再执行：

this.renderer.removeAttribute(this.elRef.nativeElement, 'disabled');
setTimeout(() => {
  this.input.nativeElement.focus();
}, 0);

原理是setTimeout的回调会在当前所有同步代码执行完、DOM更新完成后才触发，这时候输入框已经处于可用状态，就能成功聚焦了。

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