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

Question

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

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

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

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

有人知道如何设计红色组件，使其可重复使用并满足我的需求吗？非常感谢，如果需要更多解释才能理解我的问题，请告诉我。

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