javascript - Angular 2 ViewChild 查询在更改检测器之前不运行

Question

我有一个 Angular 2(beta 6)组件，其中包含一些 ViewChild 查询。它在向 View 提供数据的某些方法中使用这些查询的结果(例如测量元素的大小)。虽然在调用方法之前元素实际上已构建并添加到 DOM，但查询尚未解析。

考虑这个组件(http://plnkr.co/edit/4RQPagQzrZISNDLpj2Ku):

var Cmp = ng.core.
  Component({
    selector: 'cmp',
    template: '<div class="parent" #parent>{{parentWidth()}}</div>',
    queries:{
      parent:new ng.core.ViewChild('parent')
    }
  }).
  Class({
    constructor: [ng.core.ElementRef, function Cmp(el) {
      this.el = el;
    }],
    parentWidth:function() {
      if(!this.parent) {
        console.warn('Change detector run before queries instantiated');
        console.warn('But note that the element exists', this.el.nativeElement.querySelector('.parent'));
        return 0;
      }
      return this.parent.nativeElement.offsetWidth;
    }
  });

document.addEventListener('DOMContentLoaded', function() {
  ng.platform.browser.bootstrap(Cmp);
});

即使我想要访问的元素已经在 DOM 中，parentWidth 方法也会在实例化 this.parent 之前被调用。

是否有更好的方法从 Javascript 查询元素，或者每当我需要 View 中的某些内容时我应该返回使用 this.el.querySelector('.parent') ？

Answer 1

等到

ngAfterViewInit() {
  this.parent... // parent is initialized 
}