web-dev-qa-db-ja.com

Angular2のngOnInitとngAfterViewInitの違いは何ですか？

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'));
  }
}
angularngoninit
42
Zhiyuan Sun

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

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

50
Günter Zöchbauer

ngOnInit()は、ディレクティブのデータバインドプロパティが初めてチェックされた直後、およびその子のいずれかがチェックされる前に呼び出されます。ディレクティブがインスタンス化されるときに一度だけ呼び出されます。

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

17
Vishal Gulati

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

ビューはコンテンツの前に初期化されるため、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',
            []
        )
    }
}
1
STEEL