Angular Academy · Leçon

ngOnChanges et changements des entrées

Réagissez aux changements des propriétés d’entrée.

ngOnChanges et changements des entrées est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.

Réagir aux changements des entrées

Le hook OnChanges permet à un composant de réagir chaque fois que ses propriétés @Input changent. Angular appelle ngOnChanges avant ngOnInit et à chaque mise à jour d'une entrée.

Implémenter OnChanges

Implémentez l'interface OnChanges et ajoutez une méthode ngOnChanges qui reçoit un objet SimpleChanges.

import { Component, Input, OnChanges, SimpleChanges } from "@angular/core";

@Component({ selector: "app-demo", template: "" })
export class DemoComponent implements OnChanges {
  @Input() count = 0;
  ngOnChanges(changes: SimpleChanges): void {
    console.log(changes);
  }
}

L'objet SimpleChanges

SimpleChanges est une table indexée par le nom de l'entrée. Chaque élément est un SimpleChange contenant currentValue, previousValue et firstChange.

ngOnChanges(changes: SimpleChanges) {
  const c = changes["count"];
  if (c) {
    console.log(c.previousValue, "->", c.currentValue);
  }
}

Détecter le premier changement

L'indicateur firstChange vaut true la première fois qu'une entrée est définie. Utilisez-le pour distinguer l'initialisation des mises à jour ultérieures.

ngOnChanges(changes: SimpleChanges) {
  if (changes["count"]?.firstChange) {
    console.log("initial value");
  } else {
    console.log("updated value");
  }
}

Réagir à une entrée précise

Vérifiez toujours que la clé existe avant de la lire, car toutes les entrées ne changent pas à chaque cycle.

ngOnChanges(changes: SimpleChanges) {
  if ("userId" in changes) {
    this.reload(this.userId);
  }
}

Détection fondée sur les références

ngOnChanges se déclenche lorsque la référence d'un objet ou d'un tableau change. Modifier un objet transmis en entrée ne le déclenchera PAS.

// will NOT trigger ngOnChanges in parent-bound child:
this.config.theme = "dark";

// will trigger it:
this.config = { ...this.config, theme: "dark" };

Ordre avec ngOnInit

Lors de la création, ngOnChanges s'exécute en premier (avec les entrées initiales), puis ngOnInit. Ensuite, ngOnChanges s'exécute à nouveau chaque fois que les entrées changent.

Comparer les anciennes et les nouvelles valeurs

Un usage courant consiste à ne réagir que lorsqu'une valeur diffère réellement, par exemple en rechargeant des données lorsqu'une entrée d'identifiant change.

ngOnChanges(changes: SimpleChanges) {
  const id = changes["userId"];
  if (id && id.currentValue !== id.previousValue) {
    this.fetchUser(id.currentValue);
  }
}

Utiliser les types pour plus de sécurité

Vous pouvez lire les valeurs depuis changes ou directement depuis la propriété du composant ; après ngOnChanges, la propriété contient déjà la valeur actuelle.

ngOnChanges() {
  // this.count already updated here
  this.total = this.count * 2;
}

Quand ne pas utiliser OnChanges

Pour un état dérivé d'une seule entrée, un accesseur ou une valeur calculée peut être plus clair. Réservez ngOnChanges aux effets de bord qui doivent s'exécuter lors des mises à jour des entrées.

Plusieurs entrées à la fois

Si plusieurs entrées changent au cours du même cycle, ngOnChanges est appelé une seule fois, avec toutes ces entrées présentes dans la table SimpleChanges.

ngOnChanges(changes: SimpleChanges) {
  // both keys may be present
  if (changes["min"] || changes["max"]) {
    this.validateRange();
  }
}

Vérification rapide

Vérifiez votre compréhension de OnChanges.

Récapitulatif

Le hook OnChanges réagit aux changements des entrées au moyen d'une table SimpleChanges contenant currentValue, previousValue et firstChange. Il se déclenche lors des changements de référence ; utilisez donc des mises à jour immuables.

Questions Fréquemment Posées

La leçon « ngOnChanges et changements des entrées » est-elle gratuite ?

Oui — le texte complet de « ngOnChanges et changements des entrées » 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 « ngOnChanges et changements des entrées » ?

Réagissez aux changements des propriétés d’entrée. 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 2 sur 4.

Combien de temps prend la leçon « ngOnChanges et changements des entrées » ?

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