可以使用@ViewChild將焦點設定在特定的文字區域嗎？

Question

我有一個前端角度應用程序，我希望將焦點設置到特定的文本區域，遊標閃爍並準備好讓用戶在加載時在文本區域中鍵入。

在進行了一些谷歌搜尋後，我認為 @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();
  }

}

Answer 1

第一件事是將正確的選項傳遞給@ViewChild：

@ViewChild('myinput', {read: ElementRef})

否則你將得到元件實例而不是 dom 節點。

如果你沒有任何像*ngIf/*ngFor這樣的結構指令，那麼你也可以傳遞 {static: true, read: ElementRef}，它將使elementRef在ngOnInit中可用，否則你必須使用AfterViewInit

Answer 2

我認為程式碼不起作用，因為 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）：讓函數等待元素存在