ngOnInit와 ngAfterView의 차이점은 무엇입니까?Angular2의 시작?

ngOnInit와 ngAfterView의 차이점은 무엇입니까?Angular2의 시작?

사이에 무엇이 다른지 이해할 수 없습니다.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'));
  }
}

ngOnInit()다음으로 호출됩니다.ngOnChanges()첫 번째로 불렸습니다.ngOnChanges()는 변경 감지에 의해 입력이 업데이트될 때마다 호출됩니다.

ngAfterViewInit()뷰가 처음 렌더링된 후 호출됩니다.이것이 이유입니다.@ViewChild()그것에 달려 있습니다.뷰 구성원은 렌더링되기 전에 액세스할 수 없습니다.

ngOnInit()명령의 데이터 바인딩 속성을 처음 확인한 직후 및 하위 항목을 확인하기 전에 호출됩니다.지시어가 인스턴스화될 때 한 번만 호출됩니다.

ngAfterViewInit()구성 요소의 보기 및 하위 보기가 생성된 후에 호출됩니다.구성 요소의 보기가 완전히 초기화된 후에 호출되는 수명 주기 후크입니다.

내용은 어린이로서 전달되는 것입니다.보기는 현재 구성 요소의 템플릿입니다.

보기는 내용 이전에 초기화됩니다.ngAfterViewInit()그러므로 앞에 호출됩니다.ngAfterContentInit().

**ngAfterViewInit()자식 디렉티브(또는 구성 요소)의 바인딩을 처음 확인한 경우 호출됩니다.따라서 Angular 2 구성 요소로 DOM에 액세스하고 조작하기에 완벽합니다.@Günter Zö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',
            []
        )
    }
}

언급URL : https://stackoverflow.com/questions/40817336/whats-the-difference-between-ngoninit-and-ngafterviewinit-of-angular2