在Angular应用程序中，通常需要在一个组件中使用另一个组件。有时，这些组件需要动态创建和销毁。本文将介绍如何使用Angular2从父组件中以编程方式创建并管理子组件。
创建子组件
首先，我们需要在父组件中引入ComponentFactoryResolver。该类允许我们通过组件工厂来动态创建组件。
-- -------------------- ---- -------
------ - ---------- ---------- ----------------- ------------------------ - ---- ----------------
------ - -------------- - ---- --------------------
------------
--------- -------------
--------- -
---- -----------------
------- ------------------------------ --------------
--
--
------ ----- --------------- -
----------------------- - ----- ---------------- -- ---------- -----------------
------------------- --------- ------------------------- --
------------- -
-- --- --- --------- ------- -- ------ - --- -------- -- --- ----- ---------
----- ------- - ------------------------------------------------------
----- ------------ - ----------------------------------------
-- --------- ------ ------ -- ------- -- --- ----- ---------
----------------------------- - ------ ---- ------ ------------
-
-在上面的代码中，我们通过调用 resolver.resolveComponentFactory() 方法并传入 ChildComponent 类型来获取 ComponentFactory。然后，我们调用 container.createComponent() 方法来使用工厂创建一个新的组件实例。最后，我们可以使用 componentRef.instance 属性来设置子组件的输入属性。
销毁子组件
我们通常需要在父组件中销毁子组件。可以使用 componentRef.destroy() 方法来销毁子组件。
-- -------------------- ---- -------
------ - ---------- ---------- ----------------- ------------------------ - ---- ----------------
------ - -------------- - ---- --------------------
------------
--------- -------------
--------- -
---- -----------------
------- ------------------------------ --------------
------- -------------------------------- --------------
--
--
------ ----- --------------- -
----------------------- - ----- ---------------- -- ---------- -----------------
------------- ----
------------------- --------- ------------------------- --
------------- -
-- --- --- --------- ------- -- ------ - --- -------- -- --- ----- ---------
----- ------- - ------------------------------------------------------
----------------- - ----------------------------------------
-- --------- ------ ------ -- ------- -- --- ----- ---------
---------------------------------- - ------ ---- ------ ------------
-
-------------- -
-- ------- --- --------- ---- -- -- -- ------ ------
----------------------------
-
-在上面的代码中，我们将组件实例存储在 componentRef 属性中，以便稍后可以使用 destroy() 方法来销毁子组件。
总结
在本文中，我们介绍了如何使用Angular2从父组件中以编程方式创建并管理子组件。我们使用 ComponentFactoryResolver 类来获取 ComponentFactory 并使用 ViewContainerRef 类来动态添加和移除子组件。这种方法可用于实现复杂的组件层次结构和动态UI。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26711