Angular2：尝试使用@ViewChild注释将焦点设置到输入字段时出现未定义的错误

Question

我有一个输入字段，当我的视图按以下方式加载时，我将焦点设置为：

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

这可以在ngAfterViewInit（）函数中正常工作，但是当我在单击按钮时尝试在视图的另一部分中执行此操作时，我得到一个异常，说明focusInput未定义。读了一下后，似乎ngIf可能是导致这种情况的原因，因为包含输入字段#focusInput的视图部分使用ngIf显示或隐藏。有没有办法可以使用ngOnChanges（）或其他任何方法检查当前是否显示#focusInput输入字段以及是否将焦点设置为它？

Answer 1

最简单的解决方案是编写自定义焦点属性指令。这有很大帮助：

How to move focus on form elements the Angular way

Answer 2

当您在模板中包含 ngIf 或 ngFor 指令并且您的输入无法链接到您添加到其中的 focusInput 属性时，就会发生这种情况类。而是使用此代码：

<input type="text" #myInput />
{{ myInput.focus() }}

在模板中输入后立即添加 {{myInput.focus（）}}

Answer 3

我知道现在回答你的问题已经很晚了。如果您想在任何单击或视图更改后获得焦点，那么为此您需要调用更改检测器。 您可以在视图更改或单击后通过调用 detectchanges() 调用更改检测。

`constructor(private detRef:ChangeDetectorRef) {}
  @ViewChild('name_input') input: ElementRef;

    private buttonClick(): void {
      this.detRef.detectChanges();
      this.input.nativeElement.focus();
    }`

希望这会有所帮助。