web-dev-qa-db-fra.com

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

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

J'ai trouvé que la seule différence entre eux est @ViewChild. Selon le code suivant, les 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'));
  }
}
angularngoninit
42
Zhiyuan Sun

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

ngAfterViewInit() est appelé après le rendu initial de la vue. C'est pourquoi @ViewChild() en dépend. Vous ne pouvez pas accéder aux membres de la vue avant leur rendu.

50
Günter Zöchbauer

ngOnInit() est appelée juste après que les propriétés liées à la directive de la directive ont été vérifiées pour la première fois et avant qu'aucun de ses enfants n'ait été vérifié. Elle n'est invoquée qu'une seule fois lorsque la directive est instanciée.

ngAfterViewInit() est appelé après la création de la vue d'un composant et des vues de ses enfants. C'est un crochet de cycle de vie appelé après l'initialisation complète de la vue d'un composant.

17
Vishal Gulati

Le contenu est ce qui est transmis en tant qu'enfant. View est le modèle du composant actuel.

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

** ngAfterViewInit() est appelé lorsque les liaisons des directives enfants (ou composants) ont été vérifiées pour la première fois. C'est pourquoi il est parfait pour accéder et manipuler le DOM avec Angular 2 composants. Comme @ Günter Zöchbauer mentionné précédemment est correct @ViewChild() fonctionne donc parfaitement à 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',
            []
        )
    }
}
1
STEEL