我有一個前端角度應用程序，我希望將焦點設置到特定的文本區域，遊標閃爍並準備好讓用戶在加載時在文本區域中鍵入。
在進行了一些谷歌搜尋後，我認為 @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）：讓函數等待元素存在