Angular2中对ViewChild、ContentChild、ViewChildern的理解

@ViewChild()
括号中可以填写2种类型的参数 Type和string 在ngAfterViewInit钩子回调前完成。 一个ViewChild匹配一个组件，案例：

1.父组件中定义@ViewChild() 简单来理解就是父组件查看子组件 那就肯定写在父组件中了。

@ViewChild('child1')
child1:ChildComponent; 

2.父组件模板.html文件

<app-child #child1></app-child>

3.这样父组件可以读取子组件了

@ViewChildren()
通常用来匹配多个元素，返回QueryList集合，在ngAfterViewInit前完成
1.在主组件中定义@ViewChildren()，并设置AfterViewInit钩子，显示打印结果

//这里添加type类型
@ViewChildren(ChildComponent)
childrenlist: QueryList<ChildComponent>;

ngAfterViewInit() {
    console.log(this.childrenlist);
  }

2.html页面定义

<app-child></app-child>
<app-child></app-child>
<app-child></app-child>

3.查看结果


可以看出结果是一个集合 我自己也有个疑惑，能不能在ViewChildren中添加多个组件，但是没有实现出来
@ContentChild()
在网上找到的定义 ContentChild 是属性装饰器，用来从通过 Content Projection 方式设置的视图中获取匹配的元素 在AfterContentInit调用前完成
在我理解就是通过ng-content 父组件调用子组件的方法
1.子组件模板html中添加ng-content

<div class="testcolor">
  child1 works!
  <ng-content></ng-content>
</div>

2.父组件ContentChild定义

//这里添加string类型
@ContentChild('childCmp')
childCmp: ChildComponent;

3.主组件页面模板

<div class="testcolor">父组件</div>
<div>
    <app-child #childCmp>子组件</app-child>
</div>

这里我定义了app.html中的样式和child中的样式用于区分，并且可以通过钩子来进行测试，通过结果也可看出 父组件对子组件的可以修改，简单来说就是如果没有ng-content的话 父组件在app-child中添加的子组件是不会显示的