Cycle de vie des composants en angulaire

Les hooks de cycle de vie angulaires sont des méthodes qui permettent aux développeurs d'exploiter les moments clés du cycle de vie d'un composant angulaire, de sa création à sa destruction, qui comprend l'initialisation, les modifications et la destruction. Les hooks de cycle de vie les plus couramment utilisés sont :

1. Constructeur : appelé lors du premier chargement de la page. Appelé une seule fois.
2. ngOnChanges : exécuter plusieurs fois. la première fois s'exécutera lorsque le composant sera créé/chargé. Lorsqu'il y a un changement dans la propriété personnalisée avec le décorateur @input, ce hook sera appelé à chaque fois. travaillé avec argument - changements simples
3. ngOnInit : Appelé une fois le composant initialisé. Idéal pour paramétrer l’état du composant.
4. ngDoCheck : utilisé pour détecter les changements manuellement (appelé à chaque cycle de détection de changement).
5. ngAfterContentInit : Appelé après la projection du contenu dans le composant.
6. ngAfterContentChecked : appelé après la vérification du contenu projeté.
7. ngAfterViewInit : appelé après l'initialisation de la vue.
8. ngAfterViewChecked : appelé après qu'Angular ait vérifié la vue du composant.
9. ngOnDestroy : Appelé juste avant la destruction du composant. Utilisez-le pour nettoyer les ressources, comme vous désabonner des observables.

Avant de plonger, créons un projet préalable :
Nous aurons besoin d'un composant parent et enfant. Nous aurons un champ de saisie dans le composant parent et transmettrons cette valeur saisie à l'enfant et l'afficherons dans le composant enfant.

parent.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  value:string = '';
  SubmitValue(val: any) {
    this.value = val.value;
  }

}

parent.component.html

<h1 id="Lifecycle-Hooks">Lifecycle Hooks</h1>

<input type="text" placeholder="Input here...">
<button>Submit Value</button>

<br><br>
<app-child></app-child>

enfant.component.ts

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  constructor() { }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {
  }

}

enfant.component.html

<div>
    Input Value: <strong>{{inputValue}}</strong>
</div>

Nous aurons un résultat comme ceci :

1.Constructeur

• Le constructeur est une méthode de classe TypeScript utilisée pour initialiser un composant. Il est appelé avant tout hook de cycle de vie angulaire.
• Utilisation principale : initialiser l'injection de dépendances et configurer les variables.

export class ChildComponent implements OnInit {

  constructor() {
    **console.log("Constructor Called");**
  }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {}

}

2.ngOnChanges

• Invoqué lorsque les propriétés d'entrée d'un composant sont modifiées.
• Fournit un objet SimpleChanges contenant les valeurs précédentes et actuelles des propriétés d'entrée.
• Utilisation : mettez à jour la propriété d'entrée de données du composant parent pour déclencher ce hook.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  value:string = '';
  SubmitValue(val: any) {
    this.value = val.value;
  }

}

Encore une fois, j'ai saisi la valeur et encore une fois, ngOnChanges a appelé mais le constructeur n'a appelé qu'une seule fois.

Voyons ce que nous avons dans l'argument des changements :

<h1 id="Lifecycle-Hooks">Lifecycle Hooks</h1>

<input type="text" placeholder="Input here...">
<button>Submit Value</button>

<br><br>
<app-child></app-child>

Mettons un peu de valeur et voyons :

3.ngOnInit

• Appelé une fois après le premier ngOnChanges.
• Utilisation principale : initialisez le composant et configurez toutes les données nécessaires au rendu.

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  constructor() { }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {
  }

}

4.ngDoCheck

• S'exécute chaque fois qu'Angular détecte un changement dans le composant ou ses enfants.
• Utilisez-le pour une logique de détection de changement personnalisée.

<div>
    Input Value: <strong>{{inputValue}}</strong>
</div>

5.ngAfterContentInit

• Appelé une fois après la projection du contenu (par exemple, ) dans le composant.

enfant.component.html

export class ChildComponent implements OnInit {

  constructor() {
    **console.log("Constructor Called");**
  }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {}

}

parent.component.html

export class ChildComponent implements OnInit, OnChanges {

  constructor() {
    console.log("Constructor Called");
  }

  ngOnChanges(changes: SimpleChanges): void {
    console.log("ngOnChanges Called");
  }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {}

}

enfant.component.ts

 ngOnChanges(changes: SimpleChanges): void {
    console.log("ngOnChanges Called", changes);
  }

6.ngAfterContentChecked

• Appelé après chaque vérification du contenu projeté.
• À utiliser avec parcimonie pour éviter les problèmes de performances.

export class ChildComponent implements OnInit, OnChanges {

  constructor() {
    console.log("Constructor Called");
  }
  ngOnChanges(changes: SimpleChanges): void {
    console.log("ngOnChanges Called");
  }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {
    console.log("ngOnInit Called");
  }

}

jouons autour de ça :

export class ChildComponent implements OnInit, OnChanges, DoCheck {

  constructor() {
    console.log("Constructor Called");
  }
  ngOnChanges(changes: SimpleChanges): void {
    console.log("ngOnChanges Called", changes);
  }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {
    console.log("ngOnInit Called");
  }

  ngDoCheck() {
    console.log("ngDoCheck Called");
  }

}

Lorsqu'il y a à nouveau un changement dans ng-content, ngAfterContentChecked est appelé.

7.ngAfterViewInit

• Appelé une fois après l'initialisation de la vue du composant et de ses vues enfants.
• Utile pour initialiser des bibliothèques tierces ou des manipulations DOM.

8.ngAfterViewChecked

• Invoqué après chaque vérification de la vue du composant et de ses vues enfants.

9.ngOnDestroy

• Appelé juste avant la destruction du composant.
• Utilisez-le pour des tâches de nettoyage telles que la désinscription des observables ou le détachement des écouteurs d'événements.

ngOnDestroy ne sera appelé que lorsque nous détruisons un composant, essayons donc de supprimer le composant enfant lorsque nous cliquons sur le bouton Détruire le composant.
Prenons des dispositions :

parent.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  value:string = '';
  SubmitValue(val: any) {
    this.value = val.value;
  }

}

parent.component.html

<h1 id="Lifecycle-Hooks">Lifecycle Hooks</h1>

<input type="text" placeholder="Input here...">
<button>Submit Value</button>

<br><br>
<app-child></app-child>

Avant de cliquer sur le bouton Détruire le composant :

Après avoir cliqué sur le bouton Détruire le composant :

Séquence de hook du cycle de vie :

1. Constructeur
2. ngOnChanges (si les propriétés @Input existent)
3. ngOnInit
4. ngDoCheck
5. ngAfterContentInit
6. ngAfterContentChecked
7. ngAfterViewInit
8. ngAfterViewChecked
9. ngOnDestroy

En comprenant et en utilisant efficacement ces hooks, vous pouvez gérer le comportement du composant à différentes étapes de son cycle de vie.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!