Angular

Appearance

Comment utiliser ngAfterContentChecked dans Angular ? ​

ngAfterContentChecked est un hook de cycle de vie Angular qui est appelé chaque fois que le change detection du contenu externe du composant (y compris les projections) a été effectué. Vous pouvez l'utiliser pour effectuer des tâches qui dépendent de l'état du contenu externe de votre composant.

Voici comment utiliser ngAfterContentChecked dans votre composant Angular :

  1. Importez l'interface AfterContentChecked dans votre composant :
ts
import { Component, AfterContentChecked } from '@angular/core';
import { Component, AfterContentChecked } from '@angular/core';
  1. Faites en sorte que votre composant implémente l'interface AfterContentChecked :
ts
export class MyComponent implements AfterContentChecked {
  // ...
}
export class MyComponent implements AfterContentChecked {
  // ...
}
  1. Implémentez la méthode ngAfterContentChecked dans votre composant :
ts
ngAfterContentChecked() {
  // Cette méthode sera appelée chaque fois que le change detection du contenu externe du composant
  // a été effectué. Vous pouvez y mettre votre code ici.
}
ngAfterContentChecked() {
  // Cette méthode sera appelée chaque fois que le change detection du contenu externe du composant
  // a été effectué. Vous pouvez y mettre votre code ici.
}

Voici un exemple de composant qui utilise ngAfterContentChecked :

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

@Component({
  selector: 'app-my-component',
  template: `
    <h1>Mon composant</h1>
    <ng-content></ng-content>
  `,
})
export class MyComponent implements AfterContentChecked {
  ngAfterContentChecked() {
    console.log('Le contenu externe du composant a été vérifié !');
  }
}
import { Component, AfterContentChecked } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <h1>Mon composant</h1>
    <ng-content></ng-content>
  `,
})
export class MyComponent implements AfterContentChecked {
  ngAfterContentChecked() {
    console.log('Le contenu externe du composant a été vérifié !');
  }
}

Vous pouvez utiliser ngAfterContentChecked dans votre template de composant de la façon suivante :

html
<app-my-component>
  <p>Contenu externe du composant</p>
</app-my-component>
<app-my-component>
  <p>Contenu externe du composant</p>
</app-my-component>

Chaque fois que le change detection du composant sera effectué, la méthode ngAfterContentChecked sera appelée et le message "Le contenu externe du composant a été vérifié !" sera affiché dans la console.

TIP

Notez que le change detection se produit automatiquement dans Angular lorsque les données du modèle sont mises à jour, mais vous pouvez également déclencher manuellement le change detection en utilisant ChangeDetectorRef.detectChanges().