Appearance
Comment utiliser ngAfterContentInit dans Angular ?
ngAfterContentInit
est un hook de cycle de vie Angular qui est appelé une fois après que le contenu externe du composant (y compris les projections) a été initialisé. Vous pouvez l'utiliser pour effectuer des tâches d'initialisation qui dépendent du contenu externe de votre composant.
Voici comment utiliser ngAfterContentInit
dans votre composant Angular :
- Importez l'interface
AfterContentInit
dans votre composant :
ts
import { Component, AfterContentInit } from '@angular/core';
import { Component, AfterContentInit } from '@angular/core';
- Faites en sorte que votre composant implémente l'interface
AfterContentInit
:
ts
export class MyComponent implements AfterContentInit {
// ...
}
export class MyComponent implements AfterContentInit {
// ...
}
- Implémentez la méthode
ngAfterContentInit
dans votre composant :
ts
ngAfterContentInit() {
// Cette méthode sera appelée une fois après que le contenu externe du composant
// a été initialisé. Vous pouvez y mettre votre code d'initialisation ici.
}
ngAfterContentInit() {
// Cette méthode sera appelée une fois après que le contenu externe du composant
// a été initialisé. Vous pouvez y mettre votre code d'initialisation ici.
}
Voici un exemple de composant qui utilise ngAfterContentInit
:
ts
import { Component, AfterContentInit } from '@angular/core';
@Component({
selector: 'app-my-component',
template: `
<h1>Mon composant</h1>
<ng-content></ng-content>
`,
})
export class MyComponent implements AfterContentInit {
ngAfterContentInit() {
console.log('Le contenu externe du composant a été initialisé !');
}
}
import { Component, AfterContentInit } from '@angular/core';
@Component({
selector: 'app-my-component',
template: `
<h1>Mon composant</h1>
<ng-content></ng-content>
`,
})
export class MyComponent implements AfterContentInit {
ngAfterContentInit() {
console.log('Le contenu externe du composant a été initialisé !');
}
}
Vous pouvez utiliser ngAfterContentInit
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>
Lorsque le composant sera initialisé, la méthode ngAfterContentInit
sera appelée une fois et le message "Le contenu externe du composant a été initialisé !" sera affiché dans la console.