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()ディレクティブのデータバインドプロパティが初めて確認されてきた直後に呼び出され、そしてその子のいずれかの前にチェックされています。ディレクティブがインスタンス化されると、一度だけ呼び出されます。

ngAfterViewInit()は、コンポーネントのビューと子ビューが作成された後に呼び出されます。コンポーネントのビューが完全に初期化された後に呼び出されるライフサイクルフックです。

Answer 2

ngOnInit()が呼び出された後に初めて呼び出されたngOnChanges()です。 ngOnChanges()は、変更検出によって入力が更新されるたびに呼び出されます。

ngAfterViewInit()ビューは最初にレンダリングされた後に呼び出されます。そのため、@ViewChild()がそれに依存しています。レンダリングされる前にビューメンバーにアクセスすることはできません。

Answer 3

内容は子供として渡される内容です。ビューは、現在のコンポーネントのテンプレートです。

コンテンツはngAfterViewInit()の前に初期化され、ngAfterContentInit()より前に呼び出されます。

** ngAfterViewInit()は、子ディレクティブ（またはコンポーネント）のバインディングが初めてチェックされたときに呼び出されます。したがって、Angular 2コンポーネントでDOMにアクセスして操作するのに最適です。前に述べた@GünterZö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', 
      [] 
     ) 
    } 
}