Angular 12 中如何使用 ViewChild 获取子组件的实例
ViewChild 是 Angular 中大家熟知的一个特性，可以通过它获取到在模板中声明的子组件实例或者元素。本篇文章将详细介绍在 Angular 12 中如何使用 ViewChild 获取子组件的实例。
在 Angular 中，具有子父关系的组件可以通过 @ViewChild 获取到子组件的实例。具体来说，@ViewChild 可以获取另一个组件的实例对象，并将该对象分配给一个属性。在使用 ViewChild 时，要注意以下几点：
- @ViewChild 仅可以获取子组件的实例，对普通 DOM 元素无效。
- 组件的视图必须已被渲染才可以使用 ViewChild。
- ViewChild 只能获取在同一个 ts 文件中定义的子组件，不能获取在其他组件中定义的子组件。
下面以一个简单的示例来演示如何使用 ViewChild 获取子组件的实例：
假设我们有一个名为 ParentComponent 的组件，它的模板中包含一个名为 ChildComponent 的组件。我们需要在 ParentComponent 中获取 ChildComponent 的实例。
---- --------------- -- --- ---------- -------------------
在 ParentComponent 中我们需要定义一个 ViewChild 属性来获取 ChildComponent 的实例，如下所示：
------ ----- --------------- ---------- ------------- -
------------------- --------------- ---------------
------------------ ---- -
---------------------------------- -- -------
-
-在上述代码中，我们通过 ViewChild 装饰器获取到了名为 child 的子组件实例，并将它赋值给 childComponent 属性。在 ngAfterViewInit 生命周期钩子函数中，我们可以调用子组件的方法。
需要注意的是，我们要等到 Angular 渲染了组件视图后（即 ngAfterViewInit 钩子函数被触发时），才能在组件中使用 ViewChild。
如果您需要获取多个子组件实例，可以使用 QueryList 来管理所有子组件。QueryList 是 Angular 提供的一个集合类，可以用来保存一组 DOM 元素或者组件实例。
------ ----- --------------- -
---------------------- ---------------- --------------------------
------------------ ---- -
--------------------------------------------- -- -
----------------------------- -- ----------
---
-
-在上述代码中，我们使用了 @ViewChildren 装饰器来获取所有名为 child 的子组件实例，并将它们保存在一个 QueryList 里面。在 ngAfterViewInit 钩子函数中，我们遍历了所有子组件实例，并调用它们的方法。
总结
通过 ViewChild，我们可以方便地获取子组件内部的状态并进行操作。在使用 ViewChild 时，需要注意视图已渲染和子组件定义在同一个 ts 文件中的限制。
示例代码已上传到 GitHub，希望可以帮助大家更好地使用 ViewChild。
参考资料
《Angular Cookbook》 - Mathieu Nayrolles, 刘洋, 黄斐, 陈小平 《Angular 学习指南》 - 美波 angular.io文档：https://angular.cn/docs
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65aba567add4f0e0ff54e842