93

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'));
  }
}
4

3 回答 3

118

ngOnInit()ngOnChanges()在第一次被调用之后被调用。ngOnChanges()每次通过变化检测更新输入时调用。

ngAfterViewInit()在最初渲染视图后调用。这就是为什么@ViewChild()依赖它。在呈现之前，您无法访问视图成员。

于 2016-11-26T12:34:59.433 回答
34

ngOnInit()在第一次检查指令的数据绑定属性之后，并且在检查其任何子项之前立即调用。当指令被实例化时，它只被调用一次。

ngAfterViewInit()在组件的视图及其子视图创建后调用。它是一个生命周期钩子，在组件的视图完全初始化后调用。

于 2016-11-26T12:34:25.227 回答
1

内容是作为孩子传递的。View 是当前组件的模板。

视图在内容之前被初始化，ngAfterViewInit()因此被调用 before 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',
            []
        )
    }
}
于 2017-05-12T08:15:12.490 回答