Quelle est la différence entre ngAfterContentInit et ngAfterViewInit?

Question

Quelle est la différence entre les fonctions ngAfterContentInit et ngAfterViewInit?

Answer 1

Le contenu est ce qui est transmis en tant qu'enfant et généralement projeté sur un élément <ng-content> D'un composant.
La vue est le modèle du composant actuel.

La vue est initialisée après le contenu et ngAfterViewInit() est donc appelée après ngAfterContentInit().

@Component({
  selector: 'parent-cmp',
  template: '<div #wrapper><ng-content></ng-content></div>'
})
class ParentComponent {
  @ViewChild('wrapper') wrapper:ElementRef;
  @ContentChild('myContent') content:ElementRef;

  ngAfterViewInit() {
    console.log('ngAfterViewInit - wrapper', this.wrapper);
    console.log('ngAfterViewInit - content', this.content);
  }

  ngAfterContentInit() {
    console.log('ngAfterContentInit - wrapper', this.wrapper);
    console.log('ngAfterContentInit - content', this.content);
  }
}

<parent-cmp><div #myContent>foo</div></parent-cmp>

Si vous exécutez ce code, la sortie de ngAfterViewInit - content Doit être null.

Plus de détails sur les crochets de cycle de vie voir https://angular.io/guide/lifecycle-hooks

Answer 2

L'image suivante montre l'ordre des crochets. source: Crochets de cycle de vie angulaire

ngAfterContentInit: Ceci est appelé après l'initialisation du contenu externe des composants.

ngAfterViewInit: Ceci est appelé après que la vue du composant et ses vues enfants ont été initialisées.