angular中利用ViewChild传递数据

在项目中，有些可以公用的组件，一般我们就抽离出来，然后在需要用到的页面，再引入进来。那么，当我们不仅仅需要共用组件的UI显示，还需要用到组件里的变量时，我们就可以用viewchild来获取。具体做法如下：

一、确认page.component.ts中正确引入组件：

二：在page.component.ts中，引用：

 @ViewChild(CommonComponent)  common;

三、在需要的地方，调用数据：

console.log(this.common);

这样，就可以在page.component.ts拿到我们需要的数据。

需要注意的一点是，一定要在ngAfterViewInit后，才能正确拿到组件数据。官方文档是这么说明的：

View queries are set before the ngAfterViewInit callback is called.

在调用 NgAfterViewInit 回调函数之前就会设置这些视图查询。