Angular2共享组件与动态未共享组件答案

【问题标题】：Angular2 Shared component with dynamic not shared componentsAngular2共享组件与动态未共享组件
【发布时间】：2017-02-03 20:09:26
【问题描述】：

我有两个模块（M1、M2），每个模块上有两个组件（CL1、CI2、CL3、CI4）：一个 ListComponent 和一个 ItemComponent。我创建了一个共享模块，其中包含 SearchComponent 来查找项目以填充列表。 SearchComponent 调用一个后端服务，它会根据情况返回一个带有 CI2 或 CI4 数据的 json。

问题是我想在 SearchComponent 中重用 CI2 和 CI4 来显示搜索结果，但它们不能在 SharchModule (SM) 上声明，因为它们已经在 M1 和 M2 上。此外，这会在 M1 SM 和 M2 SM 之间产生循环依赖。

有没有办法将 CI2 和 CI4 重用于 SM？我发现的唯一方法是为 SM 复制 CI2 和 CI4，但我想避免这种情况。

快速采样的 Plunker： https://plnkr.co/edit/a3xiBz6uUF7OcAaRLD4c

SearchComponent 的第 30 行是 CI2、CI4 应该重用的地方。

【问题讨论】：

您可以构造 SM，使其使用ng-content 来显示结果，然后它就不需要显示组件的先验知识。如果您可以添加代码示例或指向 plunker，这将有助于理解问题。

标签： angular circular-dependency

【解决方案1】：

Angular 2 dynamic tabs with user-click chosen components

<ng-container *ngComponentOutlet="component"></ng-container> 其中组件是 CI2 或 CI4，具体取决于具体情况。另外 CI2 和 CI4 不需要导入搜索模块。（ngComponentOutlet 在 Angular 4 上）。

【讨论】：