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

Posted 2023-03-13

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

【英文标题】：Angular2: undefined errors when trying to set focus to an input field using @ViewChild annotation

【发布时间】：2017-08-19 21:41:03

【问题描述】：

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

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

这在 ngAfterViewInit() 函数中可以正常工作，但是当我尝试在视图的另一部分中执行此操作时，单击按钮时出现异常，指出 focusInput 未定义。在阅读了一下之后，似乎 ngIf 可能是导致此问题的原因，因为包含输入字段#focusInput 的视图部分使用 ngIf 显示或隐藏。有什么方法可以使用 ngOnChanges() 或其他任何方法检查 #focusInput 输入字段是否当前显示以及是否将其设置为焦点？

【问题讨论】：

尝试使用setter ***.com/questions/42534524/…

@yurzui 我不完全明白。所以我可以在使用 setter 函数设置焦点之前设置对该 html 输入字段的引用？

创建演示您的问题的 plunker。正如你所说，你使用ngIf。这就是为什么当 ngIf 返回 false 时您的引用为 null 的原因。 setter 将帮助您识别引用是否未定义

问题是当我尝试设置焦点时，该元素会显示出来，因此无济于事。它似乎只在 ngAfterViewInit() 中定义。有没有办法让我使用设置器重新初始化它，所以它不是未定义的？hel

在setter中你会得到价值。如果它不是未定义的，你可以设置焦点

【参考方案1】：

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

How to move focus on form elements the Angular way

【参考方案2】：

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

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

只需在模板内输入后添加 myInput.focus()

【参考方案3】：

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

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

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

希望这会有所帮助。