如何在角度为2的运行时将组件放在其他组件中？

Question

我想在Angular2中创建一个组件，它将显示一个包含一些数据的表（让我们假设不同产品P1和P2的销售数据）。与表格一起，我希望允许用户在不同类型的图表之间选择选项，并根据图表选择，我想在数据表下方的容器中显示所显示数据的图表。

我创建了一个组件（让我们称之为Main），它有一个组件，一个显示图形类型的无线电组。现在有10种不同的图形类型，我为这10种类型创建了10种不同的图形组件。

方法： 我可以将所有十个组件放在主组件中，并根据用户选择我显示相应的图组件。但是这种方法成本太高，因为主要组件阴影dom将具有所有图形组件。它还存在问题如果我允许用​​户从一段时间内进行选择并使用绑定更新显示的图形，因为它将导致更新未显示的其他图形。

是否有任何方法可以在主组件中放置通用容器，并在主组件中注入图形组件列表，并根据用户选择将选定的图形组件放入该容器中。放入容器不应该破坏绑定。

总结一下，我想找到一种方法来动态地将组件放在另一个组件中。理想情况下，在Composite Design Pattern中，在运行时确定组件应该相当容易。我无法用角度2来解决这个问题。

Answer 1

使用DynamicComponentLoader 有关动态加载组件的示例，请参阅此plnkr。 关键是this.dcl.loadNextToLocation(Widget1, this.insertPoint);并在代码中使用System.import来延迟加载组件。虽然我会指出组件在实例化*之前没有加载到shadow DOM中，所以可能没有必要进行延迟加载。

loadNextToLocation是您可以使用的DynamicComponentLoader中的三种方法之一，具体取决于您希望组件注入的方式和位置。请注意，loadAsRoot存在一个问题（当前版本为2.0.0-beta.7），导致无法在所有情况下正确加载。有关详细信息，请参阅此plnkr。