当我们使用 Angular 框架构建 Web 应用程序时，我们经常需要动态创建组件并在组件内部获取模板元素。Angular 框架提供了 ViewChild 和 ViewChildren 去做这件事，并且这两个 API 对于动态组件非常重要。
在这篇文章中，我们将讨论如何在动态组件中使用 ViewChild 和 ViewChildren，并且将通过示例代码给你深度的学习和指导意义。
ViewChild 和 ViewChildren 简介
ViewChild 和 ViewChildren 是 Angular 中的两个重要 API，它们都被用于获取组件、指令或本地变量中的元素。它们有以下特点：
- ViewChild 和 ViewChildren 当我们需要访问引用元素的属性、方法或事件时，它们是非常有用的。
- ViewChild 用于获取单个组件、指令或本地变量中的元素，而 ViewChildren 用于获取多个组件、指令或本地变量中的元素。
- ViewChild 和 ViewChildren 可以应用于静态和动态组件，其工作方式与动态创建组件是无关的。
由于 ViewChild 和 ViewChildren 都是在组件中使用的，我们将在下一节中进一步讨论动态组件并阐明其重要性。
动态组件的意义
在 Angular 中，我们可以使用动态组件来创建那些在编译期间不能确定的组件。例如，我们可以使用动态组件来动态创建模态对话框、弹出菜单、路由导航菜单等等。
使用动态组件是很有意义的，因为它：
- 允许我们不必预先在模板中声明组件，从而减少代码和模板的大小。
- 提高了代码的可读性和可维护性，因为我们可以将模板与逻辑代码分开。
- 允许我们根据用户操作或数据状态动态地加载和卸载组件。
- 允许我们使用 ViewChild 和 ViewChildren 去动态获取组件或元素并与其交互。
接下来，我们将讨论如何在动态组件中使用 ViewChild 和 ViewChildren。
如何使用 ViewChild
ViewChild 可以获取单个组件、指令或本地变量中的元素，并且它可以用于静态和动态组件。下面是使用 ViewChild 获取动态组件中某个元素的示例：
------------ --------- ------------------------ --------- ----- ---------------- ---------------- -- ------ ----- ---------------- - --------------------- -------- ------ -------- ----------- -
在上面的代码中，我们定义了一个 DynamicComponent 组件，并且在其中声明了 message 元素，该元素使用了局部变量并指定名称为 message。
然后我们使用了 ViewChild 装饰器去获取该组件中名称为 message 的元素，并且将其重新赋值给了 message 成员变量。这样一来，我们就可以在组件的生命周期函数内操作该元素了。
需要注意的是，我们在 @ViewChild 装饰器的第二个参数中指定了 {static: true}。这意味着我们正在使用静态查询，Angular 在组件创建后立即查找该元素。如果我们更改为 {static: false}，则使用的是动态查询，Angular 将在组件的变更检测周期中执行查找。
接下来，我们将看到一个更复杂的例子，该例子演示如何在动态组件中使用 ViewChild。
------------
--------- -------------------
--------- -
----- -------------------
------ ----------- ----------------------- -------
-------
-
--
------ ----- -------------------- -
----- ----------
------------------- -------- ------ ------ -----------
------------------- ------------ ------------ -
--------- - ------------------------
------ --
---
-
----------------- -
---------------------------------
-
-在上面的代码中，我们定义了一个 DynamicFormComponent 组件，并且在其中声明了一个名为 input 的输入框。
我们将其绑定到一个带有名为 form 的 FormGroup 中，并且在组件构造函数中使用 FormBuilder 对象来定义这个 FormGroup。
然后我们在 ngAfterViewInit 生命周期钩子函数中使用 input.nativeElement.focus() 来获得 input 元素并将其聚焦。
在上述过程中，我们使用了 ViewChild 装饰器来获取名称为 input 的元素。这样一来，我们就可以在 ngAfterViewInit 生命周期钩子函数中处理 input 元素了。
如何使用 ViewChildren
ViewChildren 在动态组件中的使用方式和 ViewChild 很相似。唯一的区别在于，ViewChildren 可以获取多个组件、指令或本地变量中的元素。
下面是一个简单的 ViewChildren 示例，该示例演示如何获取动态组件中所有 td 元素：
------------
--------- --------------------
--------- -
-------
----
--- ----------- ------
--- ----------- ------
-----
--------
-
--
------ ----- --------------------- -
------------------- ------ ----------------------
-在上述代码中，我们定义了一个 DynamicTableComponent 组件，并在其中声明了两个名称为 cell1 和 cell2 的 td 元素。
我们使用 @ViewChildren('td') 去获取所有名称为 td 的元素，然后将它们赋值给了 cells 成员变量，该成员变量是 QueryList<ElementRef> 类型的。
现在，我们可以使用 cells 变量去操作所有 td 元素了。例如，我们可以迭代所有 td 元素并对它们进行操作：
----------------------- -- - ---------------------------------------- - --------- ---
上述代码将迭代所有 td 元素并将其背景颜色设置为黄色。
结论
在这篇文章中，我们已经详细地介绍了动态组件及如何在其中使用 ViewChild 和 ViewChildren。
我们首先介绍了 ViewChild 和 ViewChildren 的概念及其在 Angular 中的定义，并且提供了使用的示例。然后，我们介绍了动态组件的概念及其重要性，并为你提供了一个使用动态组件和 ViewChild 的示例。
希望本文能够帮助你更好地理解 Angular 中的动态组件和 ViewChild，以及如何使用它们在动态组件中获取和操作元素。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6739a221317fbffedf17c86f