显示项目列表的共享信息面板的正确方法是什么？

Question

我正在开发一个网页。此页面包含左侧的项目列表，右侧的信息面板显示特定于所选项目的一些摘要信息，如下所示：

当用户选择了一个项目时，应更新信息面板的内容以显示活动项目的内容。

我的问题：

实现此目的的正确方法是什么：

1. 为每个列表项生成一个信息面板。然后隐藏/显示活动列表项的信息面板。
2. 全球只制作一个信息面板。然后根据列表项选择更新信息面板的内容？

因为我使用的是Angular 2和Bootstrap，所以对这些库的特定建议表示赞赏。 （例如，我应该使用route来实现item-click-to-summary-display？Bootstrap库中是否有专门用于此类目的的组件？）