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中添加的子组件是不会显示的