Angular Academy · Leçon

Hooks AfterView et AfterContent

Exécutez la logique après l’initialisation de la vue et du contenu.

Hooks AfterView et AfterContent 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.

Vue et contenu

Angular distingue la vue d’un composant (son propre modèle) du contenu projeté à l’intérieur via ng-content. Des crochets distincts sont déclenchés pour chacun.

AfterViewInit

Le crochet AfterViewInit s’exécute une fois que la vue du composant et ses vues enfants sont entièrement initialisées. C’est le moment approprié pour accéder aux enfants de la vue.

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

export class DemoComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    console.log("view ready");
  }
}

Accéder à ViewChild

Une référence @ViewChild vers un élément de modèle est disponible de manière fiable dans ngAfterViewInit, et non avant.

@ViewChild("input") input!: ElementRef;

ngAfterViewInit() {
  this.input.nativeElement.focus();
}

AfterViewChecked

Le crochet AfterViewChecked s’exécute après chaque vérification de la vue du composant. Il est déclenché fréquemment : limitez donc son travail au strict nécessaire.

ngAfterViewChecked() {
  // runs after each view check
}

AfterContentInit

Le crochet AfterContentInit s’exécute une fois que le contenu projeté avec ng-content a été initialisé.

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

export class CardComponent implements AfterContentInit {
  ngAfterContentInit() {
    console.log("projected content ready");
  }
}

Accéder à ContentChild

Utilisez @ContentChild pour interroger le contenu projeté. La référence est disponible dans ngAfterContentInit.

@ContentChild(HeaderComponent) header!: HeaderComponent;

ngAfterContentInit() {
  console.log(this.header);
}

AfterContentChecked

Le crochet AfterContentChecked s’exécute après chaque vérification du contenu projeté. Comme le crochet de vérification de la vue, il est déclenché fréquemment.

Ordre complet des crochets

Pour un composant avec des entrées et du contenu, l’ordre est le suivant : ngOnChanges, ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked.

// init sequence:
// OnChanges -> OnInit -> DoCheck
// -> AfterContentInit -> AfterContentChecked
// -> AfterViewInit -> AfterViewChecked

L’erreur ExpressionChangedAfterChecked

Modifier des données liées dans ngAfterViewInit peut déclencher la célèbre erreur ExpressionChangedAfterItHasBeenCheckedError. Différez ces mises à jour pour l’éviter.

ngAfterViewInit() {
  // defer to next tick to avoid the error
  setTimeout(() => this.ready = true);
}

Utiliser ViewChildren

@ViewChildren renvoie une QueryList contenant plusieurs éléments ou composants correspondants, disponible dans ngAfterViewInit.

@ViewChildren(ItemComponent) items!: QueryList<ItemComponent>;

ngAfterViewInit() {
  console.log(this.items.length);
}

Choisir le bon crochet

Utilisez les crochets AfterView pour votre propre modèle et les crochets AfterContent pour le contenu projeté. Privilégiez les variantes Init pour l’initialisation unique et les variantes Checked uniquement lorsque cela est nécessaire.

Vérification rapide

Testez votre compréhension des crochets de vue et de contenu.

Récapitulatif

Les crochets AfterContent sont déclenchés pour le contenu projeté et les crochets AfterView pour la propre vue du composant. Les variantes Init s’exécutent une fois ; les variantes Checked s’exécutent à chaque cycle. Utilisez-les pour accéder en toute sécurité à @ViewChild et @ContentChild.

Questions Fréquemment Posées

La leçon « Hooks AfterView et AfterContent » est-elle gratuite ?

Oui — le texte complet de « Hooks AfterView et AfterContent » 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 « Hooks AfterView et AfterContent » ?

Exécutez la logique après l’initialisation de la vue et du contenu. 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 « Hooks AfterView et AfterContent » ?

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