在 Angular 中，我们通常使用组件来构建我们的应用程序，并把它们加入到特定的视图中。通常情况下，我们在代码中静态定义组件，并且在组件树的渲染过程中，它们会作为子组件传递到包含它们的主组件。但是，在某些情况下，可能需要动态获取组件，这时候 Angular 提供了一些工具来帮助我们实现这个过程。
Angular 动态组件
首先，我们需要了解什么是 Angular 动态组件。Angular 动态组件是指在应用程序运行时动态加载和删除的一种组件类型。动态组件在内部使用组件工厂来管理和加载。
在 Angular 中，我们可以使用 ComponentFactoryResolver 来动态获取和加载组件。ComponentFactoryResolver 是一个服务，它允许我们从 NgModule 中获取组件工厂，我们可以使用这个工厂来创建组件实例。
ComponentFactoryResolver
在这里，我们简单介绍一下 ComponentFactoryResolver 的作用。ComponentFactoryResolver 在应用程序中的主要作用是查找给定组件类型的组件工厂。Angular 应用程序中的组件都是使用组件工厂进行创建的，因此在尝试动态创建组件时，首先需要获取组件工厂。
例如，我们可以使用以下代码获取名为 ExampleComponent 的组件工厂：
-- -------------------- ---- -------
------ - ---------- ------- ---------- ----------------- ------------------------ - ---- ----------------
------------
--------- ----------------
--------- ------------- -------------------
--
------ ----- ------------------ ---------- ------ -
---------------- - ----- ---------------- -- --- -----------------
------------------- --------- ------------------------- --
---------- -
----- ------- - --------------------------------------------------------
----- ------------ - ---------------------------------
-
-在上述例子中，我们在 ContainerComponent 中使用了 ViewChild 来获取名为 vc 的 ViewContainerRef。然后，我们使用 ComponentFactoryResolver 来获取 ExampleComponent 组件的工厂类。最后，通过调用 ViewContainerRef 上的 createComponent 方法，我们可以将 ExampleComponent 组件渲染到我们的容器中。
动态获取组件的示例
现在，我们来看一个完整的示例，以展示如何动态获取和加载组件。
在这个例子中，我们创建了一个简单的应用程序来演示如何动态获取组件。我们创建了一个组件列表，可以动态添加或删除组件。首先，我们定义了一个组件接口，用于存储组件的类型和名称：
export interface ComponentItem<T> {
component: Type<T>;
name: string;
}然后，我们定义了一个名为 DynamicComponent 的组件，它用于渲染动态组件。在这个组件中，我们还定义了一段 HTML 模板，用于展示添加到应用程序中的组件：
<div> <h2>Dynamic Components</h2> <div #dynamicComponentContainer></div> </div>
注意这里的 #dynamicComponentContainer，它将被用作 ViewContainerRef，用于动态添加和删除组件。
接下来，我们定义动态组件的父级组件，我们称之为 AppComponent。在 AppComponent 中，我们定义了一个组件列表（components），它包含了一个元素，元素的类型是 ComponentItem。然后，我们在 AppComponent 中定义了一个方法，用于向 components 列表中添加组件：
-- -------------------- ---- -------
------ ----- ------------ -
----------- -------------------- - -
- ---------- --------------- ----- ------- --
- ---------- ---------------- ----- -------- -
--
--------------------------------------- - ----- ---------------- --
-------------------------- -----------------
------------------- --------- ------------------------- --
--------------------------- ------------------- -
----- ------- - ---------------------------------------------------------------
----- ------------ - --------------------------------------------------------
-------------------------- - -------------------
-
-在 AppComponent 中，我们通过 ViewChild 获取到了名为 dynamicComponentContainer 的 ViewContainerRef，然后我们定义了一个 addComponent 的方法，用于从组件工厂创建一个新的组件实例。我们调用 ComponentFactoryResolver 上的 resolveComponentFactory 方法来获取组件工厂，并使用 ViewContainerRef 上的 createComponent 方法在 dynamicComponentContainer 上创建组件的实例。
最后，我们需要在 HTML 中渲染我们的组件列表。在 AppComponent 中，我们使用 ngFor 指令遍历组件列表，然后为每个组件项调用 addComponent 方法来动态渲染它们：
-- -------------------- ---- -------
-----
-----
-------------------
----
--- ----------- --------- -- ------------
------- ----------------------------------
--- ------------------ ---------
---------
-----
-----
------
---------------------------------------
------通过这个示例，我们可以看到如何使用 ComponentFactoryResolver 动态获取组件，并使用 ViewContainerRef 创建新的组件实例。如果您想深入了解 Angular 动态组件，建议阅读官方文档。
总结
在 Angular 中，使用 ComponentFactoryResolver 可以动态获取组件。通过调用 ComponentFactoryResolver 上的 resolveComponentFactory 方法来获取组件工厂，然后使用 ViewContainerRef 上的 createComponent 方法在指定位置渲染组件的实例。通过这种方式，我们可以使用 Angular 功能极强的组件系统，实现复杂的组件化 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64599f9d968c7c53b0bbc3eb