1

所以我有一个输入字段，我想专注于 Angular 应用程序中的负载。我读到 Renderer2 方式是这样做的好方法，如果我在单击时调用该函数，例如，它可以工作，如下所示：

focusMyInput() {
    this.renderer.selectRootElement('#myInput').focus();
}

但是如果我试图让它专注于负载，就像这样：

ngAfterViewInit() {
    this.renderer.selectRootElement('#myInput').focus();
}

它抛出一个错误：

 The selector "#myInput" did not match any elements
    at DefaultDomRenderer2.selectRootElement

HTML：

<input id="myInput" />

知道这背后的原因是什么吗？

4

2 回答 2

3

请试试这个工作演示

 @ViewChild('myInput') myInput: ElementRef;//if it is direct child or element
 @ContentChild('myInput') myInput: ElementRef;// if it is inside ng-content html
    
ngAfterViewInit() {
this.renderer.selectRootElement(this.myInput.nativeElement).focus();
}

或者

 ngAfterContentInit() {
this.renderer.selectRootElement(this.myInput.nativeElement).focus();
    }

在HTML中你必须这样做

<input id="myInput" #myInput />
于 2020-06-15T09:27:49.363 回答
2

您可以尝试：

ngOnInit() {
    setTimeout(() => this.renderer.selectRootElement('#myInput').focus());
}

这篇文章的更多细节。

似乎有一个关于渲染后有一个事件的长期讨论。此解决方案可能会有所帮助或（真的很难看）在我之前提出的解决方案中设置 100 毫秒超时。

希望这可以帮助。

于 2020-06-15T09:54:12.193 回答