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

Question

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

我创建了一个组件（我们称之为 Main），它作为一个组件，一个显示图形类型的单选组。现在针对 10 种不同的图形类型，我为这 10 种类型创建了 10 种不同的图形组件。

方法： 我可以将所有十个组件放在主组件中，并根据用户选择显示相应的图形组件。但是这种方法成本太高，因为主组件 shadow dom 将拥有所有图形组件。如果我允许用​​户从一个时间范围内选择并使用绑定更新显示的图形，它也会出现问题，因为这将导致更新其他未显示的图形。

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

总结一下，我想找到一种方法来动态地将组件放入另一个组件中。理想情况下，在复合设计模式中，在运行时确定组件应该相当容易。我无法在角度 2 中弄清楚这一点。

Answer 1

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

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