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 un exemple de composant qui utilise ngAfterContentChecked
:
ts
import { Component, AfterContentChecked } from '@angular/core';
@Component({
selector: 'app-my-component',
standalone: true,
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>
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()
.