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

}

Answer 1

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

Answer 2

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

}

Une manière plus déterministe d'attendre qu'un nativeElement apparaisse dans le DOM est décrite ici (que setTimeout) : Laissez la fonction attendre que l'élément existe