使用@ViewChild @ViewChildren(ngAfterViewInit)， @ViewChild@ViewChildren(ngAfterContentInit)

http://www.open-open.com/lib/view/open1461113267205.html

第一次使用queries时，很容易犯这样的错：

在构造器里打印query的结果(错误)

@Component({...})
export class MyComp {
  @ViewChild(SomeDir) someDir: SomeDir;

  constructor() {
    console.log(this.someDir);// undefined
  }
}

当看到打印出来 undefined 后，你或许以为你的query压根不能用，或者是不是构造器哪里错了。事实上，你就是用数据用的太早了。必须要注意的是，query的结果集在组件构造时是不能用的。

幸运的是， angular2 提供了一种新的生命周期管理钩子，可以非常轻松的帮你理清楚各类query什么时候是可用的。

• 如果在用view query(譬如： @ViewChild ， @ViewChildren )时，结果集在视图初始化后可用。可以用 ngAfterViewInit 钩子

• 如果在用content query(譬如： @ContentChild ， @ContentChildren )时，结果集在内容初始化后可用。可以用 ngAfterContentInit 钩子

来动手改一下上面的例子吧：

在 ngAfterViewInit 里打印query结果集(推荐)

@Component({...})
export class MyComp implements AfterViewInit {
  @ViewChild(SomeDir) someDir: SomeDir;

  ngAfterViewInit() {
    console.log(this.someDir);// SomeDir {...}
  }
}