ngafterviewinit - ngoninit angular 4

¿Cuál es la diferencia entre ngOnInit y ngAfterViewInit de Angular2?

Question

No puedo entender cuál es la diferencia entre ngOnInit y ngAfterViewInit .

Encontré que la única diferencia entre ellos es @ViewChild . De acuerdo con el siguiente código, el elementRef.nativeElement en ellos es el mismo.

¿Qué escena debemos usar 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

El contenido es lo que se pasa como niños. Ver es la plantilla del componente actual.

La vista se inicializa antes del contenido y, por lo tanto, se llama a ngAfterContentInit() antes de ngAfterContentInit() .

** Se ngAfterViewInit() cuando se han verificado los enlaces de las directivas (o componentes) secundarios por primera vez. Por lo tanto, es perfecto para acceder y manipular DOM con componentes Angular 2. Como @ Günter Zöchbauer mencionó anteriormente es correcto @ViewChild() por lo tanto, funciona bien en su interior.

Ejemplo:

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

Answer 2

Se llama a ngOnChanges() después de llamar a ngOnChanges() la primera vez. ngOnChanges() se llama cada vez que las entradas se actualizan mediante la detección de cambios.

ngAfterViewInit() después de que la vista se haya renderizado inicialmente. Es por eso que @ViewChild() depende de ello. No puede acceder a los miembros de la vista antes de que se representen.

Answer 3

ngOnInit() se llama inmediatamente después de que se hayan verificado las propiedades vinculadas a los datos de la directiva por primera vez, y antes de que se haya verificado cualquiera de sus elementos secundarios. Se invoca solo una vez cuando se crea una instancia de la directiva.

ngAfterViewInit() después de la vista de un componente, y se crean las vistas de sus hijos. Es un gancho de ciclo de vida que se llama después de que la vista de un componente se haya inicializado completamente.