将动态组件附加到 ngFor 列表答案

【问题标题】：Appending dynamic Component to ngFor list将动态组件附加到 ngFor 列表
【发布时间】：2018-02-13 02:13:27
【问题描述】：

Angular 2/4（一般为 Angular）的新手，我试图想办法将组件附加到 ngFor 列表中的项目，其中列出的每个项目在列表中单击时提供它自己的组件。

我有两个兄弟组件。一个使用名为 Thumbnail 的引导程序提供缩略图的网格列表（指数长），我有一个兄弟组件，它使用插值来使用来自 Thumbnail 组件的数据来显示更多信息。我希望每个缩略图在单击时显示一个组件，其各自的信息不在列表下方，而是在列表之间。我环顾四周，看到了一些与使用 ComponentFactoryResolver 创建动态组件和使用 @Viewchild 相关的帖子，但我在这里没有成功。

我已经能够在列表下方显示新视图，但这不是设计背后的想法。

更复杂的是，我希望路由新视图，因此如果要导航到这个新组件视图，它的 URL 将显示在页面顶部的 /#id 处。或者，如果有人要访问该 URL，它将作为缩略图组件中的新视图路由到其目的地。

这是一张照片，描述了我一直在努力让它发挥作用，我认为它更好地解释了我的目标。

https://imgur.com/a/nDRHT

任何关于我应该研究什么的帮助都会很棒。谢谢。

【问题讨论】：

您是否尝试过让每个缩略图在 ngFor 中重复出现一个 col-12 大小的元素，该元素默认为隐藏，并在点击时显示？这样它就已经内联构建并显示在您期望的位置。
您可能需要将列表拆分为 2x8 并显示其间的组件。没有什么花哨的需要。
@kuhnroyal 我应该提到网格实际上比 16 个缩略图长得多，并且会不断添加。否则，您是对的，这并不像看起来那么困难。
@JoshuaOhana 在我使用 hidden 之前阅读的内容在这些情况下并不是理想的用例。我应该补充一点，缩略图会不断添加，就像画廊一样，并且会有超过 16 个项目，如果有 100 张或更多照片，可能会减慢应用程序的速度。
@BrandonI 我不确定您为什么认为它不理想……如果您已经生成了 100 个动态组件，那么将每个组件稍大一点并不会改变任何事情。如果您使用 *ngIf 有条件地渲染它们实际上并不存在于 DOM 中并且不会导致任何页面减速（只有几个额外的 JS 周期）。老实说，我想得越多，这可能是我想到的最好的方法。 Maaaaybe 你可以做一些 hacky 组件注入，但我看不出这种方法有什么好处。

标签： angular ngfor

【解决方案1】：

如果没有看到您的代码布局，很难提出一个确切的解决方案，但根据我们在上面线程中的对话，我认为下面的内容足以为您提供一个很好的起点。

我们的想法是让您的 ngFor 遍历您的缩略图，并且在每个缩略图组件内部都会有一个有条件地显示的横幅，该横幅将是全宽的。理论上，这会自动显示在正确的位置，而不会对您网站的性能产生太大影响（如果有的话）。

<div *ngFor="let thumbnail of thumbnails">
    <my-thumbnail class="col-md-3" [thumbnailImage]="thumbnail.imgSrc"></my-thumbnail>
    <thumbnail-data class="col-md-12" *ngIf="thumbnail.showData"></thumbnail-data>
</div>

显然，这只是一个超级基本的示例，说明您可以如何布局，但这个概念是合理的。基本上，您将遍历您的缩略图并将您的详细横幅部分保留在那里，但通过 ngIf 隐藏，这会导致它永远不会真正在 DOM 中绘制，直到您决定根据用户交互显示它。

【讨论】：