Kann ich @ViewChild verwenden, um den Fokus auf einen bestimmten Textbereich zu setzen?

Question

Ich habe eine Frontend-Angular-App und möchte den Fokus auf einen bestimmten Textbereich setzen, den Cursor blinken lassen und bereit sein, dass der Benutzer beim Laden den Textbereich eingeben kann.

Nachdem ich etwas gegoogelt hatte, dachte ich, @ViewChild könnte die richtige Wahl sein. Aber bis jetzt ist es mir gelungen, es zum Laufen zu bringen.

Dies ist meine gesamte eigenständige TS-Datei:

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）：让函数等待元素存在