Angular 4：Viewchild 设置焦点

Question

我尝试在不使用标签autofocus=true的情况下控制按钮焦点，但似乎无法正常工作，您认为有必要使用管道吗？

 <button #btn_focus>

 @ViewChild('btn_focus') firstNameElement: ElementRef;

  ngAfterViewInit(){
    this.firstNameElement.nativeElement.focus();
  }

谢谢。

Answer 1

我也有同样的问题尝试了多种方法但没有奏效。 最后，我使用 javascript 代码将注意力集中在具有属性 id 的给定 HTML 元素上。

function focusInputelement(id) {
        window.setTimeout(() => {
              document.getElementById(id).focus();
        }, 500);
    }

Answer 2

您的代码正在运行，您可以在此处查看它的实际效果：

https://stackblitz.com/edit/angular-6mszhb?file=app%2Fapp.component.ts

我敢打赌，您的问题只是打开了开发人员控制台，在页面加载后立即窃取了焦点。尝试在开发人员控制台关闭（有效）的情况下打开该 stackblitz，而不是打开控制台（并使其聚焦，因此您的光标在那里闪烁）并刷新页面（不起作用）。