11、ContentChild和ViewChild

时间:2024-03-19 16:55:28

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

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

首先父组件中使用子组件,并投影另一个组件
11、ContentChild和ViewChild

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

11、ContentChild和ViewChild

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

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

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

运行项目可以看到,调用的方法是先调用的(弹窗先出现了),这个与钩子的执行顺序有关:
- content相关的钩子是从父层向子层依次调用
- view相关的钩子是从子层向父层依次执行
11、ContentChild和ViewChild

也可以直接订阅被投影的子组件中分派的事件
11、ContentChild和ViewChild

也是可以响应的:

11、ContentChild和ViewChild

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

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

首先投影多个子组件
11、ContentChild和ViewChild

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

11、ContentChild和ViewChild

最后,可以遍历这个list,对各个子组件中的emitter进行订阅
11、ContentChild和ViewChild

实际效果
11、ContentChild和ViewChild

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

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

html的引用子组件的方法:
11、ContentChild和ViewChild

在组件类的TS文件中添加上对应的组件实例声明、使用代码:
11、ContentChild和ViewChild

11、ContentChild和ViewChild
关于ViewChild和ViewChildren的使用,使用Type类型和string类型的选择器进行视图查询的方法,这里有篇博客:
https://segmentfault.com/a/1190000008695459