11、ContentChild和ViewChild

在6.3节中使用ng-content投影过去的复杂组件，我们需要使用代码操作它该怎么做呢？

使用@ContentChild装饰器可以获取到被投影的组件的实例

首先父组件中使用子组件，并投影另一个组件：



然后再子组件中通过ng-content，使用select设置一个占位，以备投影：



在投影进去的组件中导入ContentChild等必要模块。

然后使用@ContentChild()装饰器，声明一个需要使用的被投影的组件的实例。

既然已经获得了投影进来的content的实例，那么然后我们可以在content相关的一些钩子中使用它，比如ngAfterContentInit()钩子。



运行项目可以看到，调用的方法是先调用的（弹窗先出现了），这个与钩子的执行顺序有关：

- content相关的钩子是从父层向子层依次调用

- view相关的钩子是从子层向父层依次执行



也可以直接订阅被投影的子组件中分派的事件：



也是可以响应的：

使用@ContentChildren装饰器，可以获取被投影的多个组件的QueryList实例

在投影进去的组件中导入ContentChildren、QueryList等必要模块。

然后使用@ContentChildren()装饰器，声明一个QueryList类型的实例，其中包含了各个被投影的子组件。然后同样可以在content相关的钩子，对QueryList实例进行遍历，获取到每个子组件实例：

首先投影多个子组件：



然后再投影到的组件中声明QueryList对象，存储各个被投影的子组件实例：



最后，可以遍历这个list，对各个子组件中的emitter进行订阅：



实际效果：

使用@ViewChild()和@ViewChildren()装饰器

ViewChild和ViewChildren的使用方式与ContentChild和ContentChildren的使用方式类似。只是不需要ng-conetnt的投影过程。

html的引用子组件的方法：



在组件类的TS文件中添加上对应的组件实例声明、使用代码：





关于ViewChild和ViewChildren的使用，使用Type类型和string类型的选择器进行视图查询的方法，这里有篇博客：

https://segmentfault.com/a/1190000008695459