将动态组件附加到ngFor列表-Java 学习之路

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

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

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

为了进一步复杂化，我希望新的View被路由，所以如果要导航到这个新的组件View，它的URL将显示在页面顶部的/ #id . 或者，如果有人要访问该URL，它将作为缩略图组件中的新视图路由到其目的地 .

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

https://imgur.com/a/nDRHT

对我应该研究的任何帮助都会很棒 . 谢谢 .

1 回答

0
如果没有看到你的代码布局，很难提出一个确切的解决方案，但根据我们在上面的主题中的对话，我认为下面的内容对你来说是一个很好的启动点 .

我们的想法是让你的ngFor迭代你的缩略图，并且在每个缩略图组件内部将是一个有条件显示的 Banner ，它将是全宽的 . 理论上，这将自动显示在正确的位置，而不会影响您的网站的性能（如果有的话） .
```
<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>
```
显然，这只是你如何展示它的一个非常基本的例子，但这个概念是合理的 . 基本上你会遍历你的缩略图并将你的细节 Banner 部分保留在那里但是通过ngIf隐藏，这导致它永远不会真正被绘制在DOM中，直到你决定根据用户交互显示它 .
回复于 2024-04-29T18:15:25+08:00

将动态组件附加到ngFor列表

1 回答

相关问题