Quelle est la différence entre ngOnInit et ngAfterViewInit de Angular2?

Je ne comprends pas quelle est la différence entre ngOnInit et ngAfterViewInit.

J'ai trouvé la seule différence entre eux est @ViewChild. Selon le code suivant, la elementRef.nativeElement en eux sont les mêmes.

Quelle scène, devrions-nous utiliser 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'));
  }
}

source d'informationauteur Zhiyuan Sun

  1. 27

    ngOnInit() est appelée après ngOnChanges() a été appelé pour la première fois. ngOnChanges() est appelée à chaque fois que les entrées sont mis à jour par la détection de changement.

    ngAfterViewInit() est appelé après le point de vue est d'abord rendu. C'est pourquoi @ViewChild() en dépend. Vous ne pouvez pas accéder à afficher les membres avant qu'ils ne soient rendus.

  2. 12

    ngOnInit() est appelée juste après la directive est liée à des données de propriétés ont été vérifiés pour la première fois, et avant tout de ses enfants ont été vérifiées. Il est invoqué qu'une seule fois lorsque la directive est instancié.

    ngAfterViewInit() est appelée après qu'une composante, et de ses enfants, de son avis, sont créés. Son cycle de vie hook qui est appelé une fois qu'un composant a été entièrement initialisé.

  3. 0

    Le contenu est ce qui est passé, comme des enfants. La vue est le modèle de la composante courante.

    La vue est initialisé avant le contenu et ngAfterViewInit() est donc appelée avant ngAfterContentInit().

    ** ngAfterViewInit() est appelé lorsque les liaisons des enfants des directives (ou composants) ont été consultées pour la première fois. D'où son parfait pour accéder et manipuler des DOM Angulaire à 2 composants. @Günter Zöchbauer mentionné avant est correct @ViewChild() donc fonctionne très bien à l'intérieur.

    Exemple:

    @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',
            []
        )
    }
}