前言
在 Angular 中，组件是您构建应用程序的基本单元。为了使您的组件更加通用，您需要了解一些基本的技术，这些技术可以使您的组件更灵活，并且使它们在不同的应用程序中可以复用。
Angular 中的两个属性，ViewChild 和 ContentChild，可以使您的组件更加通用，并且更容易实现。
本文将介绍ViewChild和ContentChild的概念、作用及其在实践中的使用。
ViewChild 和 ContentChild 概念
ViewChild 和 ContentChild 都是Angular中的装饰器，用于查询组件中的特定元素。
ViewChild 查询的是组件中的某个子元素，而 ContentChild 查询的是组件中的某个子组件或指令。
ViewChild 和 ContentChild 的使用方式相同，它们都需要一个查询参数，这个参数可以是一个类、一个字符串或一个函数。
ViewChild 示例
假设您有一个子组件和一个宿主组件，您需要在宿主组件中查询子组件的某个元素，例如它的输入框。
创建一个子组件。
------ - --------- - ---- ----------------
------------
--------- ------------
--------- -
-----
------ ------------- ----------- ------------------
------
-
--
------ ----- -------------- --在宿主组件中查询子组件的特定元素。
------ - ---------- --------- - ---- ----------------
------ - -------------- - ---- --------------------
------------
--------- -------------
--------- -
-----------------------
------- -------------------------------
-
--
------ ----- --------------- -
-------------------------- -------------- -----------
--------- -
---------------------------------------------------
-
-在上面的代码中，您可以看到我们使用了 ViewChild 装饰器来查询子组件中的输入框。我们使用了字符串 '#inputElement' 来查询元素，这个字符串应该是模板引用变量的名称。
当我们点击“查询”按钮时，查询到的元素的值会被打印在控制台中。
ContentChild 示例
与 ViewChild 不同，ContentChild 是用于查询组件中的子组件或指令的。重复上面的操作，我们可以使用 ContentChild 查询子组件的特定元素。
创建一个子组件。
------ - --------- - ---- ----------------
------------
--------- ------------
--------- -
-----
------- -------------------------------
-------------------------
------
-
--
------ ----- -------------- -
--------- -
------------------------------------------------
-
-在宿主组件中查询子组件的特定元素。
------ - ---------- ------------ - ---- ----------------
------ - -------------- - ---- --------------------
------------
--------- -------------
--------- -
-----------
---- ------------------
------------
-
--
------ ----- --------------- -
---------------------- ------- -----------
-------------------- -
------------------------------------------------
-
-在上面的代码中，我们使用 ContentChild 查询子组件中的某个元素。我们使用了字符串 'query' 来查询这个元素，它也应该是模板引用变量的名称。
当父组件调用 ngAfterContentInit() 函数时，查询到的元素的值会被打印在控制台中。这个函数是一个 Angular 钩子函数，用于在查询子组件后执行某些操作。
疑难解答
查询不到元素？
首先，请检查您的代码是否有语法错误。其次，请确保您正在查询正确的元素，并且模板引用变量的名称与查询参数相匹配。如果您正在使用 ContentChild，确保子组件已经加载完毕。
总结
本文介绍了在Angular中使用 ViewChild 和 ContentChild 的方法。在写可复用组件时，这两个属性十分有用。要熟练使用它们，需要多做练习。
感谢您的阅读，希望对您有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654839f37d4982a6eb281067