Angular2的ngOnInit和ngAfterViewInit有什么区别？

Question

我无法理解ngOnInit和之间的区别ngAfterViewInit.

我发现它们之间唯一的区别是@ViewChild.根据以下代码,elementRef.nativeElement其中的内容是相同的.

我们应该使用什么场景ngAfterViewInit？

@Component({
  selector: 'my-child-view',
  template: `
  <div id="my-child-view-id">{{hero}}</div>
  `
})
export class ChildViewComponent {
  @Input() hero: string = 'Jack';
}

//////////////////////
@Component({
  selector: 'after-view',
  template: `
    <div id="after-view-id">-- child view begins --</div>
      <my-child-view [hero]="heroName"></my-child-view>
    <div>-- child view ends --</div>`
   + `
    <p *ngIf="comment" class="comment">
      {{comment}}
    </p>
  `
})
export class AfterViewComponent implements AfterViewInit, OnInit {
  private prevHero = '';
  public heroName = 'Tom';
  public comment = '';

  // Query for a VIEW child of type `ChildViewComponent`
  @ViewChild(ChildViewComponent) viewChild: ChildViewComponent;

  constructor(private logger: LoggerService, private elementRef: ElementRef) {
  }

  ngOnInit(){
    console.log('OnInit');
    console.log(this.elementRef.nativeElement.querySelector('#my-child-view-id'));
    console.log(this.elementRef.nativeElement.querySelector('#after-view-id'));
    console.log(this.viewChild);
    console.log(this.elementRef.nativeElement.querySelector('p'));
  }

  ngAfterViewInit() {
    console.log('AfterViewInit');
    console.log(this.elementRef.nativeElement.querySelector('#my-child-view-id'));
    console.log(this.elementRef.nativeElement.querySelector('#after-view-id'));
    console.log(this.viewChild);
    console.log(this.elementRef.nativeElement.querySelector('p'));
  }
}

Answer 1

ngOnInit()之后被称为ngOnChanges()被称为第一次.ngOnChanges()每次通过变化检测更新输入时调用.

ngAfterViewInit()在最初呈现视图后调用.这就是为什么@ViewChild()取决于它.在呈现视图成员之前,您无法访问它们.

Answer 2

ngOnInit()在第一次检查指令的数据绑定属性之后,以及在检查其任何子项之前调用.实例化指令时仅调用一次.

ngAfterViewInit()在组件的视图之后调用,并创建其子视图.它是一个生命周期钩子,在组件的视图完全初始化后调用.