在 Angular 中，动态组件是指在运行时根据不同情况动态创建和操纵组件的能力。动态组件可以帮助开发者更加灵活地实现项目的需求，特别是在处理响应式布局、动态表单、大量数据展示等场景下能够发挥出最大的作用。
如何使用动态组件
使用 Angular 中的动态组件需要掌握以下两个重要概念：
- ngComponentOutlet：一个指令，用于动态插入组件；
- ViewContainerRef：一个服务，用于动态创建和管理组件。
下面我们就来介绍这两个概念以及如何使用动态组件。
ngComponentOutlet
ngComponentOutlet 是一个指令，它可以用于动态插入组件到 HTML 模板中。其基本语法格式为：
<ng-container *ngComponentOutlet="component; injector: injector; content: contentRef"></ng-container>
其中，component 是要插入的组件类型，injector 是注入器，contentRef 则是插入的内容。
下面是一个示例：
<!-- app.component.html --> <div *ngFor="let card of cards; let i = index;"> <ng-container *ngComponentOutlet="card.component"></ng-container> </div>
在上述代码中，我们使用 ngComponentOutlet 通过循环渲染 cards 数组中的不同组件。
ViewContainerRef
ViewContainerRef 是一个服务，它可以用于动态创建和管理组件。通过 ViewContainerRef，我们可以将要创建的组件类型添加到某个宿主元素中。下面是一个基本的语法格式：
constructor(private viewContainerRef: ViewContainerRef) {}
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
this.viewContainerRef.createComponent(componentFactory);在上述代码中，我们通过 createComponent 方法将动态创建的组件添加到当前的 ViewContainerRef 中。
动态组件的实现
下面是一个完整的示例代码：
-- -------------------- ---- -------
------ - ---------- ------------------------- ------ ---------- ---------------- - ---- ----------------
------------
--------- ----------------
--------- -
---- ------------------
------ ----- -------
------------ ---------------------------
------
--
--
------ ----- ----------------- -
-------- ------ -------
-------- ---- - ---------- --- ----
------------------------- - ----- ---------------- -- ------------ -----------------
------- ------------ - ---
------- --------- ----
------------------- ------------------------- ------------------------- --
----------------- -
---------------------
--------------
-
------------- -
-----------------------------
-
--------------- -
----------------- - ------------------ - -- - ----------------
----- ------ - ----------------------------
----- ---------------- - ------------------------------------------------------------------------
----- ---------------- - -----------------
-------------------------
----- ------------ - ---------------------------------------------------
-------------------------- - ------------
-
-------- -
------------- - -------------- -- -
---------------------
-- ------
-
-在上述代码中，我们使用了一个 AdBannerComponent 来实现动态添加广告的功能。在 ngAfterViewInit 生命周期钩子中，我们通过 ViewContainerRef 和 ComponentFactoryResolver 动态创建了要添加的组件，并使用 setInterval 方法实现了每隔三秒更新一次广告的功能。
下面是广告组件 AdComponent 的源码示例：
-- -------------------- ---- -------
------ - ---------- ----- - ---- ----------------
------------
--------- ---------
--------- -
---- -----------
------ ----- -------
----- ---- ------
------
--
--
------ ----- ----------- -
-------- ----- ----
-------- ------ -------
-我们将 AdComponent 作为 AdBannerComponent 的子组件，并通过动态组件实现了每隔三秒切换一个广告的效果。
总结
Angular 中的动态组件是一种非常强大的工具。在应对复杂的页面布局以及响应式的 UI 设计时，动态组件可以让我们更加方便地实现复杂的功能。本文中我们介绍了动态组件的两个重要概念，同时还给出了一个具体的示例，希望能够为大家在应用中使用动态组件提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646f2a6b968c7c53b0d8fd6e