Angular Academy · Leçon

Requêtes de vue avec viewChild

Recherchez les éléments enfants sous forme de signaux.

Requêtes de vue avec viewChild est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.

Interroger la vue

Les composants ont souvent besoin d’une référence à un élément ou à un composant enfant dans leur modèle. Angular moderne fournit la fonction de requête basée sur les signaux viewChild().

Déclarer un viewChild

Appelez viewChild() avec le nom d’une référence de modèle ou un type de composant. Le résultat est un signal.

import { Component, viewChild, ElementRef } from "@angular/core";

@Component({
  selector: "app-form",
  template: "<input #box>"
})
export class FormComponent {
  box = viewChild<ElementRef>("box");
}

Lire la requête

Comme tous les signaux, lisez une requête de vue en l’appelant. Elle renvoie l’élément correspondant ou undefined tant que la vue n’est pas prête.

focus() {
  this.box()?.nativeElement.focus();
}

Interroger un composant enfant

Passez une classe de composant pour obtenir une référence typée vers une instance de composant enfant.

import { viewChild } from "@angular/core";

child = viewChild(ChildComponent);

run() {
  this.child()?.doSomething();
}

Requêtes de vue obligatoires

Utilisez viewChild.required() lorsque l’élément interrogé doit exister. Le signal est alors non nullable.

box = viewChild.required<ElementRef>("box");

focus() {
  this.box().nativeElement.focus(); // no optional chaining
}

Interroger plusieurs éléments

viewChildren() renvoie un signal contenant un tableau en lecture seule de toutes les correspondances.

import { viewChildren } from "@angular/core";

items = viewChildren(ItemComponent);

count() {
  return this.items().length;
}

Résolution des requêtes

Les requêtes de vue basées sur les signaux sont résolues après l’initialisation de la vue. Les lire dans un effect garantit que vous n’agirez qu’une fois qu’elles seront disponibles.

constructor() {
  effect(() => {
    const el = this.box();
    if (el) el.nativeElement.focus();
  });
}

viewChild et le décorateur ViewChild

Le signal viewChild() remplace le décorateur classique @ViewChild, s’intègre aux signaux et évite dans de nombreux cas de gérer manuellement le moment du cycle de vie.

// classic:
@ViewChild("box") box!: ElementRef;

// modern:
box = viewChild<ElementRef>("box");

Lire un jeton spécifique

L’option read vous permet d’interroger un autre jeton de l’élément correspondant, par exemple une directive ou ElementRef.

tooltip = viewChild("trigger", { read: TooltipDirective });

contentChild pour la projection

Pour le contenu projeté plutôt que pour la vue propre au composant, utilisez les requêtes parallèles contentChild() et contentChildren().

import { contentChild } from "@angular/core";

header = contentChild(HeaderComponent);

Choisir la bonne requête

Utilisez les requêtes de vue pour votre propre modèle et les requêtes de contenu pour le contenu projeté ; choisissez la variante obligatoire lorsque la cible doit exister, et la variante plurielle pour les collections.

Vérification rapide

Testez votre compréhension des requêtes de vue basées sur les signaux.

Récapitulatif

Le signal viewChild() interroge les éléments et les composants enfants d’une vue de composant ; utilisez viewChild.required() pour les cibles garanties, viewChildren() pour les collections, l’option read pour des jetons spécifiques et contentChild() pour le contenu projeté.

Questions Fréquemment Posées

La leçon « Requêtes de vue avec viewChild » est-elle gratuite ?

Oui — le texte complet de « Requêtes de vue avec viewChild » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Requêtes de vue avec viewChild » ?

Recherchez les éléments enfants sous forme de signaux. Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Angular Academy ?

Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Requêtes de vue avec viewChild » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?

Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Angular Academy