Puis-je utiliser @ViewChild pour définir le focus sur une zone de texte spécifique ?

Question

J'ai une application angulaire frontale et je souhaite mettre le focus sur une zone de texte spécifique, faire clignoter le curseur et être prêt à ce que l'utilisateur tape dans la zone de texte lors du chargement.

Après avoir cherché sur Google, j'ai pensé que @ViewChild pourrait être le bon choix. Mais jusqu'à présent, j'ai réussi à le faire fonctionner.

Voici l'intégralité de mon fichier ts autonome :

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();
  }

}

P粉144705065 · Answer

La première chose est de transmettre les bonnes options à @ViewChild :

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

Sinon, vous obtiendrez des instances de composants au lieu de nœuds dom.

Si vous n'avez pas de directive structurelle comme *ngIf/*ngFor alors vous pouvez également passer {static: true, read: ElementRef}，它将使elementRef在ngOnInit中可用，否则你必须使用AfterViewInit

P粉436688931 · Answer

Je pense que le code ne fonctionne pas car le nativeElement n'est pas encore dans le DOM. Les travaux suivants (vous devriez voir dans la console (test1) que nativeElement est null au début de ngAfterViewInit). Il faut peut-être ajouter 1000 ms :

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);