Яка різниця між ngOnInit та ngAfterViewInit для Angular2?

Я не можу зрозуміти, в чому різниця 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'));
  }
}

ngOnInit()називається після того, як ngOnChanges()був викликаний вперше. ngOnChanges()викликається кожного разу, коли вхідні дані оновлюються шляхом виявлення змін.

ngAfterViewInit()викликається після подання подання. Ось чому це @ViewChild()залежить від цього. Ви не можете отримати доступ до членів перегляду до їх відображення.

ngOnInit()викликається відразу після того, як властивості, пов'язані з даними директиви, були перевірені вперше, і перед тим, як перевірено будь-яке з її дочірніх елементів. Він викликається лише один раз, коли директива є інстанційованою.

ngAfterViewInit()називається після перегляду компонента та створення поглядів його дітей. Це гачок життєвого циклу, який викликається після повного ініціалізації подання компонента.

Зміст - це те, що передається в дитинстві. Перегляд - це шаблон поточного компонента.

Представлення ініціалізується перед вмістом і ngAfterViewInit()тому викликається раніше ngAfterContentInit().

** ngAfterViewInit()викликається, коли прив'язки дочірніх директив (або компонентів) були перевірені вперше. Отже, він ідеально підходить для доступу до DOM і керування ним за допомогою компонентів Angular 2. Як @ Günter Zöchbauer було згадано раніше, це правильно, @ViewChild()отже, все працює в ньому.

Приклад:

@Component({
    selector: 'widget-three',
    template: `<input #input1 type="text">`
})
export class WidgetThree{
    @ViewChild('input1') input1;

    constructor(private renderer:Renderer){}

    ngAfterViewInit(){
        this.renderer.invokeElementMethod(
            this.input1.nativeElement,
            'focus',
            []
        )
    }
}