Qual è la differenza tra ngAfterContentInit e ngAfterViewInit?

Question

Qual è la differenza tra le funzioni ngAfterContentInit e ngAfterViewInit?

Answer 1

Il contenuto è ciò che viene trasmesso in genere ai bambini da proiettare in un elemento <ng-content> di un componente.
La vista è il modello del componente corrente.

La vista viene inizializzata dopo il contenuto e ngAfterViewInit() viene quindi chiamato dopo 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> 

Se si esegue questo codice, l'output per ngAfterViewInit - content dovrebbe essere null.

Maggiori informazioni su ganci del ciclo di vita vedono https://angular.io/guide/lifecycle-hooks

Answer 2

L'immagine seguente mostra l'ordine dei ganci. fonte: Angular Lifecycle Hooks

ngAfterContentInit: Questo è chiamato dopo componenti contenuto esterno è stato inizializzato.

ngAfterViewInit: Questo viene chiamato dopo che la vista componente e le sue viste figlio sono state inizializzate.