Javascript 如何删除禁用的属性和焦点输入角度5？

我有点困惑，试图集中输入被禁用。我有一个在开始时被禁用的输入。单击一个按钮后，我想删除禁用的属性并聚焦此输入

我在focus

this.renderer.removeAttribute（this.elRef.nativeElement，'disabled'）之前从输入中删除了属性
然后尝试聚焦输入
this.input.nativeElement.focus（）

其中
this.input
是
@ViewChild（'input'）输入：ElementRef
禁用的属性消失，但输入未聚焦。这是
我还尝试绑定到
[attr.disabled]
，但没有帮助

动态关注元素并以角度操作DOM属性的最佳解决方案是什么？顺便说一句，我使用的是最新的Angular。
elRef
是没有禁用
属性的宿主元素

this.renderer.removeAttribute(this.elRef.nativeElement, 'disabled');
                                   ^^^^^
                             seems input should be here


更新
在这种情况下，为什么输入不集中？我切换了isDisabled-所以
禁用的attr应该设置为null，我错了吗？那么我们应该能够专注于输入

这是因为角度变化检测机制是如何工作的

它将被设置为
null
，但只有在下一个VM回合之后，当没有微任务时，才会设置为。Angular使用zone.js运行更改检测

this.isDisabled = !this.isDisabled; // 1) you only change property
this.input.nativeElement.focus();  // 2) you executed focus(input is still disabled)
....
....
AppRef
  zone.onMicrotaskEmpty.subcribe(() => run change detection) // 3) your template is updated

您有几个选项可以解决此问题：

1） 使用
Renderer2
API，如答案开头所示

2） 订阅
onMicrotaskEmpty
事件

在这种情况下，angular app不会调用加法更改检测循环

3） 使用另一个答案中建议的
setTimeout

this.isDisabled = !this.isDisabled; 
this.cdRef.detectChanges();
this.input.nativeElement.focus();

角度应用程序将另外检查完整组件树

4） 在另一个答案的评论中，建议使用
ChangeDetectorRef.detectChanges（）
方法

this.isDisabled = !this.isDisabled; 
this.cdRef.detectChanges();
this.input.nativeElement.focus();

附加检查仅此组件及其子组件
elRef
是不具有禁用属性的宿主元素

this.renderer.removeAttribute(this.elRef.nativeElement, 'disabled');
                                   ^^^^^
                             seems input should be here


更新
在这种情况下，为什么输入不集中？我切换了isDisabled-所以
禁用的attr应该设置为null，我错了吗？那么我们应该能够专注于输入

这是因为角度变化检测机制是如何工作的

它将被设置为
null
，但只有在下一个VM回合之后，当没有微任务时，才会设置为。Angular使用zone.js运行更改检测

this.isDisabled = !this.isDisabled; // 1) you only change property
this.input.nativeElement.focus();  // 2) you executed focus(input is still disabled)
....
....
AppRef
  zone.onMicrotaskEmpty.subcribe(() => run change detection) // 3) your template is updated

您有几个选项可以解决此问题：

1） 使用
Renderer2
API，如答案开头所示

2） 订阅
onMicrotaskEmpty
事件

在这种情况下，angular app不会调用加法更改检测循环

3） 使用另一个答案中建议的
setTimeout

this.isDisabled = !this.isDisabled; 
this.cdRef.detectChanges();
this.input.nativeElement.focus();

角度应用程序将另外检查完整组件树

4） 在另一个答案的评论中，建议使用
ChangeDetectorRef.detectChanges（）
方法

this.isDisabled = !this.isDisabled; 
this.cdRef.detectChanges();
this.input.nativeElement.focus();

附加仅检查此组件及其子组件
根本不需要渲染器，您只需等待一个勾号，视图就会更新，因此nativeElement不再被禁用，并且可以聚焦：

focus() {
   this.isDisabled = !this.isDisabled;
   setTimeout(() => {
      this.input.nativeElement.focus();
   });
}

根本不需要渲染器，只需等待一个勾号，视图就会更新，因此nativeElement不再被禁用，可以聚焦：

focus() {
   this.isDisabled = !this.isDisabled;
   setTimeout(() => {
      this.input.nativeElement.focus();
   });
}

非常感谢。它起作用了。我还有一个问题。为什么这个代码不起作用？它从DOM中删除
禁用的
属性，但输入仍然没有被聚焦
focus（）{this.isDisabled=！this.isDisabled；this.input.nativeElement.focus（）；}
似乎在
this.input.nativeElement.focus（）之后模板更新了调用
为什么此代码不工作？
哪个代码？角度更新模板后，你调用焦点方法对不起，我是说这个。在这种情况下，为什么输入不集中？我切换了
isDisabled
-因此
disabled
attr应该设置为
null
，我错了吗？然后我们应该能够专注于
输入
伟大的更新答案。使用渲染器2时性能如何？这是不是最好的方法？我认为使用渲染器时性能没有任何问题。谢谢。它起作用了。我还有一个问题。为什么这个代码不起作用？它从DOM中删除
禁用的
属性，但输入仍然没有被聚焦
focus（）{this.isDisabled=！this.isDisabled；this.input.nativeElement.focus（）；}
似乎在
this.input.nativeElement.focus（）之后模板更新了调用
为什么此代码不工作？
哪个代码？角度更新模板后，你调用焦点方法对不起，我是说这个。在这种情况下，为什么输入不集中？我切换了
isDisabled
-因此
disabled
attr应该设置为
null
，我错了吗？然后我们应该能够专注于
输入
伟大的更新答案。使用渲染器2时性能如何？这是不是最好的方法？我认为使用渲染器时性能没有任何问题。谢谢。你的答案有效。但我真的不喜欢setTimeout。我必须在几种方法中多次使用它，因为我还需要处理
（blur）
事件。在切换
this.isDisabled
后，您可以尝试调用
ChangeDetectorRef.detectChanges（），至少值得一试谢谢你。你的答案有效。但我真的不喜欢setTimeout。我必须在几种方法中多次使用它，因为我还需要处理
（blur）
事件。在切换
this.isDisabled
后，您可以尝试调用
ChangeDetectorRef.detectChanges（）
，以强制DOM