Angular 2/4（一般是Angular）的新手，我正试图找到一种方法将一个组件附加到ngFor列表中的项目，其中列出的每个项目在列表中单击时提供它自己的组件。
我有两个兄弟组件。一个使用名为Thumbnail的引导程序提供网格列表（指数长）的缩略图，我有一个兄弟组件，它使用插值来使用Thumbnail Component中的数据来显示更多信息。我希望每个缩略图在单击时显示一个组件，其各自的信息不在列表下方，而是在它之间。我环顾四周，看到了一些与使用ComponentFactoryResolver和使用@Viewchild创建动态组件相关的帖子，但我还没有在这里取得成功。
我已经能够将新的View显示在列表下方，但这不是设计背后的想法。
为了进一步复杂化，我希望新的View被路由，所以如果要导航到这个新的组件View，它的URL将显示在页面顶部的/ #id。或者如果有人要访问该URL，它将作为缩略图组件中的新视图路由到其目的地。
这是一张照片，描述了我一直试图让它发挥作用，我认为它更好地解释了我的目标。
对我应该研究的任何帮助都会很棒。感谢。
答案 0 :(得分：0)
如果没有看到您的代码布局，很难提出一个确切的解决方案，但根据我们在上面的主题中的对话，我认为以下内容对您来说是一个很好的启动点。
我们的想法是让您的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中。