Détection des mises à jour avec Angular OnChanges

Dans cet article, nous examinerons le hook de cycle de vie Angular onChanges et comment nous pouvons l’utiliser dans nos flux de travail.

Que sont les crochets de cycle de vie ?

Les crochets de cycle de vie sont essentiellement des méthodes utilisées pour répondre aux événements dans le cycle de vie d’un composant, c’est-à-dire avant que le composant ne soit ajouté au DOM, lorsque le composant est ajouté, jusqu’à après qu’il a été supprimé du DOM. Ceux-ci inclus:
changes, init, doCheck, afterContentInit, afterContentChecked, afterViewInit, afterViewChecked, onDestroy.

Qu’est-ce qu’Angular onChanges ?

Selon le Docs angulaires officielsla onChanges Le hook de cycle de vie est appelé lorsqu’une propriété liée aux données d’une directive change. Vous l’utilisez en définissant un ngOnChanges() méthode pour gérer les changements.

interface OnChanges {
  ngOnChanges(changes: SimpleChanges): void
}

Il est généralement appelé en premier avant ngOnInit puis ensuite après tout changement de propriété d’entrée.

Ce que nous construisons

Nous construisons une application de commande de restaurant simple qui sert de la nourriture végétalienne et non végétalienne. Nous l’utiliserons ensuite pour illustrer comment nous pouvons utiliser le onChanges hook de cycle de vie pour gérer les changements impliqués lors d’une commande de nourriture.

Conditions préalables

Pour pouvoir suivre la démonstration de cet article, vous devez avoir :

• Un environnement de développement intégré comme VS Code
• Node version 11.0 est installé sur votre machine
• Node Package Manager version 6.7 (il est généralement livré avec l’installation de Node)
• CLI angulaire version 8.0 ou supérieure
• Version 12 ou supérieure d’Angular

D’autres avantages incluent :

• Connaissance pratique du framework Angular à un niveau débutant.

Commencer

Commencez par créer un nouveau projet Angular. Ouvrez votre terminal dans le dossier de votre choix et lancez cette commande :

ng new changes

Après avoir choisi aucun routage et CSS, un nouveau projet Angular sera créé pour vous dans ce dossier. Par défaut, ce projet Angular contient déjà le composant app, que nous utiliserons comme composant parent. Nous utiliserons le décorateur d’entrée pour transmettre des données d’un parent à un composant enfant. Créons un composant enfant :

ng generate component newcomp

Cela crée un nouveau composant dans le dossier source de notre application Angular.

Votre fichier app module.ts devrait ressembler exactement à ceci :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewcompComponent } from './newcomp/newcomp.component';
@NgModule({
  declarations: [
    AppComponent,
    NewcompComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Utilisation du décorateur d’entrée

Votre fichier de composant d’application devrait ressembler à ceci :

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'changes';
  veganValue = false;
}

Nous avons un veganValue variable définie dans la classe et définie sur false. Dans le fichier component.html de votre application, remplacez le contenu par le bloc de code ci-dessous :

<div style="text-align: center; padding: 30px;">
  <h1>This is the parent component</h1>
  <button (click)="veganValue=true">Vegan Food</button>
  <button (click)="veganValue=false">Non-Vegan Food</button>
  <app-newcomp [vegan]='veganValue'></app-newcomp>
  </div>

Ici, nous modifions la valeur de veganValue variable selon le bouton cliqué. Nous apportons également le newComp ici en disant à Angular de le prendre comme composant enfant et en passant la valeur actuelle de veganValue à végétalien à l’intérieur du composant enfant. A l’intérieur de votre newcomp Le fichier de composant devrait ressembler à ceci :

import { Component, OnInit, Input } from '@angular/core';
@Component({
  selector: 'app-newcomp',
  templateUrl: './newcomp.component.html',
  styleUrls: ['./newcomp.component.css']
})
export class NewcompComponent implements OnInit {
  @Input() vegan: boolean;
    constructor() { }
  ngOnInit(): void {
    }
  }

Ici, nous importons le décorateur d’entrée et l’utilisons pour obtenir la valeur du composant parent une fois que le composant est initialisé sur le DOM. La newcomp Le fichier HTML du composant doit ressembler à ceci :

<h2>This is the child component</h2>
<h4 *ngIf='!vegan; else elseBlock'>Here is your Chicken wings and fries</h4>
<ng-template #elseBlock><h4>Here is your Vegan salad</h4></ng-template>

Enregistrez maintenant tous les fichiers et exécutez la commande Angular serve :

ng serve

Où ngOnChanges entre en jeu

Et si vous vouliez être averti par Angular lui-même lorsqu’il y a un changement sur une propriété d’entrée liée aux données dans le DOM ? Vous pouvez utiliser l’angle onChanges crochet de cycle de vie pour cela.

Ce crochet reçoit un objet appelé SimpleChangesqui contient des valeurs telles que :

• Valeur précédente : Ce qui vous indique quelle était la valeur précédente – pour un booléen, ce serait vrai ou faux.
• Valeur actuelle: Ce qui vous indique la valeur actuelle en ce moment.
• Premier changement : Ce qui indique si c’est la première fois qu’il y a un changement de propriété d’entrée. C’est généralement vrai pour la toute première fois, juste avant onInit.

Ajout de ngOnChanges

Nous devons changer le newcomp composant de la OnInit crochet de cycle de vie au onChanges une.

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
@Component({
  selector: 'app-newcomp',
  templateUrl: './newcomp.component.html',
  styleUrls: ['./newcomp.component.css']
})
export class NewcompComponent implements OnChanges {
  message: string
  @Input() vegan: boolean;
  constructor() { }
ngOnChanges(changes: SimpleChanges) {
    console.log(changes);
    const veganValue = changes['vegan'];
    if (veganValue.currentValue === true) {
      this.message = 'Here is your vegan food';
    } else {
      this.message = 'Here is non-vegan food';
    }
  }
}

Ici, nous apportons le onChanges et le SimpleChanges objet dont nous avons parlé plus tôt. Nous utilisons les variables d’objet pour définir la valeur de la nourriture végétalienne cette fois-ci, puis l’affectons au message.

Modifier le contenu de la newcomp fichier HTML du composant à ceci :

<h2>This is the child component</h2>
<p>{{message}}</p>

Maintenant, si vous enregistrez tous les fichiers et regardez la console du navigateur, vous pouvez voir que cet objet est enregistré.

Emballer

Vous avez appris sur ngOnChanges hook de cycle de vie dans Angular et où il peut être utilisé. Vous avez également vu le simpleChanges object et à quel point il peut être utile pour écrire une logique qui s’exécute en fonction des modifications des propriétés d’entrée dans votre DOM.

Bon piratage !

Suivantvous voudrez peut-être consulter notre série de liaisons de données pour Angular. Voici la partie 1 : Interpolation.