我有一个前端角度应用程序，我希望将焦点设置到特定的文本区域，光标闪烁并准备好让用户在加载时在文本区域中键入。
在进行了一些谷歌搜索后，我认为 @ViewChild 可能是正确的选择。但到目前为止我已经能够让它工作了。
这是我的整个独立 ts 文件：
import { Component, ElementRef, ViewChild } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h1>Hello from {{name}}!</h1>
<textarea #reference placeholder="Start typing"></textarea>
`
})
export class App {
@ViewChild('reference') textarea: ElementRef<HTMLTextAreaElement> | undefined;
name = 'Angular';
ngAfterViewInit(): void {
this.textarea?.nativeElement.focus();
}
} 
第一件事是将正确的选项传递给
@ViewChild：@ViewChild('myinput', {read: ElementRef})否则你将得到组件实例而不是 dom 节点。
如果你没有任何像*ngIf/*ngFor这样的结构指令，那么你也可以传递
{static: true, read: ElementRef}，它将使elementRef在ngOnInit中可用，否则你必须使用AfterViewInit我认为代码不起作用，因为 nativeElement 尚未在 DOM 中。 以下内容有效（您应该在控制台（test1）中看到 nativeElement 在 ngAfterViewInit 的开头为 null）。也许你必须增加 1000ms：
ngAfterViewInit(): void { // nativeElement is null console.log('test1',this.textarea?.nativeElement); setTimeout(() => { // nativeElement is not null console.log('test2',this.textarea?.nativeElement); this.textarea?.nativeElement.focus(); }, 1000);}
此处描述了等待 nativeElement 出现在 DOM 中的更具确定性的方法（比 setTimeout）：让函数等待元素存在