ngAfterContentInit和ngAfterViewInit有什么区别?

时间:2016-06-22 08:42:03

标签: angular angular2-template

ngAfterContentInit ngAfterViewInit 功能有什么区别?

2 个答案:

答案 0 :(得分:19)

内容是通常在子组件的某个<ng-content>元素上投影的子项 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

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

答案 1 :(得分:9)

下图显示了挂钩的顺序。来源:Angular Lifecycle Hooks

Angular 2 life cycle hooks

ngAfterContentInit :在初始化组件外部内容后调用此方法。

ngAfterViewInit :在组件视图及其子视图初始化后调用。