在 Angular 中，组件是构建用户界面的基本单元。组件可以嵌套在其他组件中，形成一个层级结构。在这个层级结构中，我们可以使用多种方式创建子组件。
本文将介绍 Angular 中创建子组件的几种方法，包括：
- 使用
ng-content投影内容 - 使用
@ViewChild获取子组件实例 - 使用
@ContentChild获取子组件实例 - 使用
ng-template和ng-container动态创建子组件
使用 ng-content 投影内容
ng-content 是 Angular 中用于投影内容的指令。它可以将组件内部的内容投影到组件的外部，从而实现在组件内部传递数据和事件的目的。
我们可以在父组件中使用 ng-content 来创建子组件。例如，以下是一个 app-parent 组件，它包含一个 app-child 子组件：
<!-- app-parent.component.html --> <app-child> <h1>Hello, World!</h1> </app-child>
在 app-child 组件中，我们可以使用 ng-content 投影父组件传递进来的内容：
<!-- app-child.component.html --> <div> <ng-content></ng-content> </div>
在这个例子中，app-parent 组件中的 <h1> 标签将被投影到 app-child 组件中的 <ng-content> 标签中。
使用 @ViewChild 获取子组件实例
@ViewChild 是 Angular 中用于获取子组件实例的装饰器。它可以让我们在父组件中访问子组件的属性和方法。
首先，我们需要在父组件中使用 @ViewChild 获取子组件实例。例如，以下是一个 app-parent 组件，它包含一个 app-child 子组件：
-- -------------------- ---- -------
-- -----------------------
------ - ---------- --------- - ---- ----------------
------ - ----------------- - ---- ------------------------
------------
--------- -------------
--------- -
-----------------------
-
--
------ ----- ------------------ -
-----------------------------
------- --------------- ------------------
-在这个例子中，我们使用 @ViewChild 装饰器获取了 AppChildComponent 的实例，并将其存储在 childComponent 属性中。
接下来，我们可以在父组件中使用 childComponent 属性访问子组件的属性和方法。例如，以下是一个 app-child 组件，它包含一个 greet() 方法：
-- -------------------- ---- -------
-- ----------------------
------ - --------- - ---- ----------------
------------
--------- ------------
--------- -
------- ------- --------
-
--
------ ----- ----------------- -
------ ------- - ------- --------
------ ------- -
------------------- ---------
-
-我们可以在父组件中调用子组件的 greet() 方法：
-- -------------------- ---- -------
-- -----------------------
------ - ---------- --------- - ---- ----------------
------ - ----------------- - ---- ------------------------
------------
--------- -------------
--------- -
-----------------------
------- -----------------------------------------------
-
--
------ ----- ------------------ -
-----------------------------
------- --------------- ------------------
-在这个例子中，我们在父组件中添加了一个按钮，点击这个按钮将调用子组件的 greet() 方法。
使用 @ContentChild 获取子组件实例
@ContentChild 是 Angular 中用于获取投影内容中的子组件实例的装饰器。它可以让我们在父组件中访问投影内容中的子组件的属性和方法。
首先，我们需要在父组件中使用 ng-content 投影子组件。例如，以下是一个 app-parent 组件，它包含一个 app-child 子组件：
<!-- app-parent.component.html --> <app-child> <h1>Hello, World!</h1> </app-child>
在 app-child 组件中，我们需要使用 ng-content 投影子组件：
<!-- app-child.component.html --> <div> <ng-content></ng-content> </div>
接下来，我们可以在父组件中使用 @ContentChild 装饰器获取投影内容中的子组件实例。例如，以下是一个 app-parent 组件，它获取了投影内容中的 app-child 子组件实例：
-- -------------------- ---- -------
-- -----------------------
------ - ---------- ------------ - ---- ----------------
------ - ----------------- - ---- ------------------------
------------
--------- -------------
--------- -
-----------
---------- -----------
------------
-
--
------ ----- ------------------ -
--------------------------------
------- --------------- ------------------
-在这个例子中，我们使用 @ContentChild 装饰器获取了投影内容中的 AppChildComponent 实例，并将其存储在 childComponent 属性中。
接下来，我们可以在父组件中使用 childComponent 属性访问投影内容中的子组件的属性和方法。例如，以下是一个 app-child 组件，它包含一个 greet() 方法：
-- -------------------- ---- -------
-- ----------------------
------ - --------- - ---- ----------------
------------
--------- ------------
--------- -
------- ------- --------
-
--
------ ----- ----------------- -
------ ------- - ------- --------
------ ------- -
------------------- ---------
-
-我们可以在父组件中调用投影内容中的子组件的 greet() 方法：
-- -------------------- ---- -------
-- -----------------------
------ - ---------- ------------ - ---- ----------------
------ - ----------------- - ---- ------------------------
------------
--------- -------------
--------- -
-----------
---------- -----------
------------
------- -----------------------------------------------
-
--
------ ----- ------------------ -
--------------------------------
------- --------------- ------------------
-在这个例子中，我们在父组件中添加了一个按钮，点击这个按钮将调用投影内容中的子组件的 greet() 方法。
使用 ng-template 和 ng-container 动态创建子组件
ng-template 和 ng-container 是 Angular 中用于动态创建组件的指令。它们可以让我们在父组件中根据条件动态创建子组件。
首先，我们需要在父组件中使用 ng-template 和 ng-container 创建一个模板。例如，以下是一个 app-parent 组件，它根据条件动态创建 app-child 子组件：
<!-- app-parent.component.html -->
<ng-container *ngIf="showChild">
<ng-template #childTemplate>
<app-child></app-child>
</ng-template>
</ng-container>在这个例子中，我们使用 *ngIf 条件语句来决定是否显示子组件。如果 showChild 为 true，就会动态创建子组件。
接下来，我们可以在父组件中使用 ViewChild 和 ViewContainerRef 获取子组件的容器，并使用 createComponent 方法动态创建子组件。例如，以下是一个 app-parent 组件，它根据条件动态创建 app-child 子组件：
-- -------------------- ---- -------
-- -----------------------
------ - ---------- ---------- ----------------- ------------------------ - ---- ----------------
------ - ----------------- - ---- ------------------------
------------
--------- -------------
--------- -
------------- -------------------------------
------- ------------------------------ --------------
-
--
------ ----- ------------------ -
---------------------------- - ----- ---------------- --
------- --------------- -----------------
------- --------------------- - -------------------------------------------------------------------------
------- ------------------
------- --------- - ------
------------------- ------------------------- ------------------------- --
------ ------------- -
-- ------------------------- -
---------------------- - ----------------------------------------------------------------
-
-
-在这个例子中，我们使用 ViewChild 和 ViewContainerRef 获取了 childContainer 容器，并使用 createComponent 方法动态创建了 AppChildComponent 子组件。
在 createChild 方法中，我们检查 childComponentRef 是否已经存在。如果不存在，就使用 createComponent 方法创建子组件。
接下来，我们可以在父组件中根据条件销毁子组件。例如，以下是一个 app-parent 组件，它根据条件创建和销毁 app-child 子组件：
-- -------------------- ---- -------
-- -----------------------
------ - ---------- ---------- ----------------- ------------------------ - ---- ----------------
------ - ----------------- - ---- ------------------------
------------
--------- -------------
--------- -
------------- -------------------------------
------- ----------------------- ------------------------- --------------
------- ------------------------ ------------------------- --------------
-
--
------ ----- ------------------ -
---------------------------- - ----- ---------------- --
------- --------------- -----------------
------- --------------------- - -------------------------------------------------------------------------
------- ------------------
------- --------- - ------
------------------- ------------------------- ------------------------- --
------ ------------- -
-- ------------------------- -
---------------------- - ----------------------------------------------------------------
-------------- - -----
-
-
------ -------------- -
-- ------------------------ -
---------------------------------
---------------------- - -----
-------------- - ------
-
-
-在这个例子中，我们添加了两个按钮，一个用于创建子组件，一个用于销毁子组件。在 createChild 方法中，我们创建子组件并将 showChild 设置为 true。在 destroyChild 方法中，我们销毁子组件并将 showChild 设置为 false。
总结
本文介绍了 Angular 中创建子组件的几种方法，包括使用 ng-content 投影内容、使用 @ViewChild 获取子组件实例、使用 @ContentChild 获取子组件实例、使用 ng-template 和 ng-container 动态创建子组件。这些方法可以让我们在 Angular 应用中更灵活地组织和管理组件，提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d1bfc6add4f0e0ffa5dcfb