在 Angular 的开发中，有时我们需要获得某一个组件中的 DOM 元素，以便于对其进行操作。针对这个需求，Angular 提供了一种方便的方式 @ViewChild 来获取 DOM 元素。本文将为大家详细介绍 Angular 中如何使用 @ViewChild 来获取和操作 DOM 元素。
什么是 @ViewChild
@ViewChild 是 Angular 提供的一种用于获取在视图层级中某一个组件实例引用的装饰器函数。我们可以使用它来暴露在组件的模板中声明的元素。
在组件中使用 @ViewChild ，我们需要执行以下步骤：
- Node 描述器模板变量: 创建一个模板变量，为组件模板中的节点分配一个名字，使组件可以引用它。
---- --------------
- 获取引用 通过在组件中使用 @ViewChild 获取引用：
-------------------- ----------- -----------
使用完全合格名称，与装饰器中的字符串匹配来设置该属性的查询策略。例如：
------------------------- -------------- --------------
如何使用 @ViewChild 获取 DOM 元素
接下来我们将演示一个包含输入框和按钮的组件，使用 @ViewChild 来获取输入框的值并展示在 span 元素中。
- 首先在组件模板中添加相应的 DOM 元素：
------ ----------- ------------ ------- ------------------------------------------ ---- ----------- ------------------
同时需要给其中的输入框和展示文本添加相应的引用标签，以便于在组件中调用：
- 指令名称 + # + 引用名称
- div#name（name为引用变量名称）
- 再在组件中使用 @ViewChild 获取这些 DOM 元素的引用：
------ - ---------- ---------- ---------- - ---- ----------------
------------
--------- --------------------
------------ ---------------------------------
---------- ----------------------------------
--
------ ----- --------------------- -
------------------------ -------- ------ --------- -----------
----------------------- -------- ------ ------------- -----------
--------------- -
----- ---------- - ----------------------------------
----------------------------------------- - -----------
-
-通过 @ViewChild 修饰符，我们可以成功获取输入框和展示文本的 DOM 元素引用。
- 最后，在组件中编写具体的展示逻辑，即将点击按钮时输入框的值展示在展示文本中：
--------------- - ----- ---------- - ---------------------------------- ----------------------------------------- - ----------- -
最终效果如下：
总结
本文介绍了 Angular 中如何使用 @ViewChild 获取 DOM 元素，通过这种方法，我们可以轻松获取组件模板中的 DOM 元素，并进行进一步的操作。在开发实践中，我们可以通过 @ViewChild 来实现组件和 DOM 元素的交互，从而更好的完成前端开发的任务。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/664fedead3423812e41b036a