在 Angular 开发中，视图元素（View Elements）是与组件（Component）产生交互的重要对象。而在 Angular 中，可以通过 ViewChild 和 ViewChildren 方法来获取视图元素，以便在组件中进行操作。
ViewChild 和 ViewChildren 方法的介绍
ViewChild 和 ViewChildren 方法是 Angular 中用于操作 DOM 元素的重要方法，二者的区别在于：
- ViewChild：用于获取单个视图元素，返回的是 ElementRef 对象。
- ViewChildren：用于获取多个视图元素，返回的是 QueryList 对象。
例如，在 Angular 中，可以通过以下方式获取单个视图元素：
------------------------ ----------- -----------
这样就可以通过 elementRef 引用到对应的 DOM 元素，然后进行操作。
而如果想获取多个视图元素，则可以使用 ViewChildren 方法：
--------------------------- ------------ ----------------------
这里使用的是类似 jQuery 中的选择器，可以根据元素的 class 或 id 等属性来选择。
使用 ViewChild 和 ViewChildren 的示例
下面我们通过一个示例来详细介绍如何在 Angular 中使用 ViewChild 和 ViewChildren 方法。
我们要实现一个简单的组件，根据用户输入的数字来生成相应数量的按钮，并能够监听按钮的点击事件。
首先，在 HTML 中我们定义一个输入框和一个按钮：
------ -------------------- -------------------- ------- ----------------------------------
然后在生成按钮的方法中，我们使用 ViewChild 来获取到按钮所在的 DOM 元素：
---------- -
--- ---- - - -- - - ------------ ---- -
----- ------ - ---------------------------------
------------------ - --- ------
-------------------------------- -- -- -
------------------- -------
---
-------------------------------------------------------
-
-
----------------------------- ---------------- -----------注意，这里使用的是原生的 DOM 操作方法，而不是 Angular 的组件方法。这里获取到的 buttonContainer 变量是一个 ElementRef 类型的对象，它类似于 jQuery 中的 $ 符号，可以通过其 nativeElement 属性获取到实际的 DOM 元素。
接着，在组件中实现监听按钮点击事件的方法，我们使用 ViewChildren 来获取到所有的按钮：
-------- ----------------------
----------------- -
--------------------------- -- -
---------------------------------------------- -- -- -
------------------- --------------------------------------
---
---
-
----------------------- --- ---------------- ---------------------- -
------------ - --------
-这里使用了一个生命周期方法 ngAfterViewInit，它会在组件的视图初始化完毕后调用。我们在这个方法中使用了 ViewChildren 来获取到所有的按钮元素，并添加了一个监听器。
注意，这里传入的参数 'button' 是我们在 HTML 中定义的按钮的选择器。
至此，我们已经完成了一个简单的使用 ViewChild 和 ViewChildren 方法的示例。
总结
通过本文的介绍，我们了解了 Angular 中使用 ViewChild 和 ViewChildren 方法来获取 DOM 元素的方式，并在一个简单的示例中演示了如何使用这两个方法。
在实际的开发中，通过 ViewChild 和 ViewChildren 方法，我们可以方便地获取到 DOM 元素，进行一系列的操作，同时也可以更好地将组件与视图进行解耦。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/648d16bd48841e9894b6283d