如何打开内部带有不同仪表板组件的角度动态选项卡？

Question

我在使用动态标签时遇到了一个问题，我一直无法在上面找到好的解决方案或示例，因此我希望在这里提供一些帮助。

我希望访问我网页的访问者到达一个首页，在该首页上有一个表格列出了不同的组织以及属于该组织的用户。访客单击组织时，应打开一个标签，并显示特定于组织的仪表板组件（即，仪表板中包含与组织相关的配置文件信息的名片）。但是，当访问者单击用户时，也应打开一个选项卡，但屏幕上将显示一个专门用于显示用户个人资料的仪表板组件。在下面的示例stackblitz中，我设法设置了动态选项卡，并且在首页上有2个组织和3个属于这2个组织的用户的按钮。

现在的问题是，如何使组织的选项卡显示组织仪表板组件，而用户的选项卡显示用户仪表板组件？

在addTab()中是否可以添加参数，以便它不仅获得新标签的名称？例如，它还可以获取用户想要在新标签中显示的仪表板类型，即“用户”还是“组织”？

还是Angular提供了更好的替代方法？

这是我的示例stackblitz

Answer 1

您可以在标签上设置一个context变量，这样您的标签就会像这样

{
  tabName: string,
  context: string,
}

然后在您的html中，您可以使用*ngIf来检查其上下文是客户还是组织

<app-app-dashboard *ngIf="tab.context == 'org'"></app-app-dashboard>
<app-client-dashboard *ngIf="tab.context == 'user'"></app-client-dashboard>

这就是您所要做的。这是工作的stackblitz。我添加了背景颜色，以帮助您注意到客户端和组织背景之间的区别。