带有用户单击所选组件的Angular动态选项卡

Question

带有用户单击所选组件的Angular动态选项卡

我正在尝试设置一个标签系统，允许组件自己注册（带标题）。第一个选项卡就像一个收件箱，有大量的操作/链接项可供用户选择，每个点击都应该能够在点击时实例化一个新组件。动作/链接来自JSON。

然后，实例化的组件将自己注册为新选项卡。

我不确定这是否是“最佳”方法？Sofar我见过的唯一指南是静态标签，这没有帮助。

到目前为止，我只有主要引导的标签服务在整个应用程序中持续存在，看起来像这样的东西。

export interface ITab { title: string; }@Injectable()export class TabsService {
    private tabs = new Set<ITab>();
    addTab(title: string): ITab {
        let tab: ITab = { title };
        this.tabs.add(tab);
        return tab;
    }
    removeTab(tab: ITab) {
        this.tabs.delete(tab);
    }}

问题：

1. 如何在收件箱中创建一个动态列表来创建新的（不同的）标签？我有点猜测DynamicComponentBuilder会被使用吗？

2. 如何从收件箱创建的组件（单击时）将自己注册为选项卡并显示？我猜ng-content，但我找不到有关如何使用它的更多信息

编辑：尝试澄清

将收件箱视为邮件收件箱，将项目作为JSON提取并显示多个项目。单击其中一个项目后，将创建一个新选项卡，其中包含该项操作“类型”。然后类型是一个组件