angular - ngAfterContentInit() 和 ngAfterViewInit() 有什么区别？

Question

函数 ngAfterContentInit() 和 ngAfterViewInit() 有什么区别？

Answer 1

内容是作为 child 传递的内容，通常会投影到某个位置 <ng-content>组件的元素。
View是当前组件的模板。

View 在内容和ngAfterViewInit() 之后初始化因此被称为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>

如果运行此代码，ngAfterViewInit - content 的输出应该是 null .

有关生命周期 Hook 的更多详细信息，请参阅 https://angular.io/guide/lifecycle-hooks