Angular 6 - 实现复杂模板的最佳方式

Question

我对 Angular 2.0+ 的世界还比较陌生，我正面临一个关于模板设计的问题。我确信有一种 Angular 方法可以做到这一点；我只是还没有找到明确的答案。

所以，我的想法是（见附图）我有红色组件，它必须包含在应用程序的许多部分中。红色组件的一些样式、输入和输出对于整个应用程序都是相同的。但是在红色组件内部必须嵌入三个组件，这些组件会根据红色组件的放置位置而有所不同。

例如，假设红色组件是详细信息页面的容器。如果放置在实体 A 的详细信息页面中，绿色组件将是地图，黄色组件将是图像，蓝色组件将是阅读更多按钮。所有这些组件都必须具有输入、输出和可能的引用，以便可以使用子视图对其进行操作。

如果红色组件放置在其他地方，那么这三个组件会有所不同。甚至可能只有 2 个，而不是三个组件。

是否有人知道如何设计红色组件以使其可重复使用并适合我的必需品？非常感谢，如果需要更多解释才能理解我的问题，请告诉我。

Answer 1

在这种情况下，您可以使用命名为 ng-content，您可以在其中将多个组件作为其容器数据并传递输入/事件/样式或您想要传递的任何内容 -

<red-component>
<yellow-component></yellow-component>
<blue-component></blue-component>
<green-component></green-component>
</red-component>

• https://medium.freecodecamp.org/everything-you-need-to-know-about-ng-template-ng-content-ng-container-and-ngtemplateoutlet-4b7b51223691