相关疑难解决方法(0)

我正在尝试设置一个标签系统,允许组件自己注册(带标题).第一个选项卡就像一个收件箱,有大量的操作/链接项可供用户选择,每个点击都应该能够在点击时实例化一个新组件.动作/链接来自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提取并显示多个项目.单击其中一个项目后,将创建一个新选项卡,其中包含该项操作"类型".然后类型是一个组件

Edit2:图片

http://i.imgur.com/yzfMOXJ.png

通过ComponentFactory动态创建组件时,返回的ComponentRef提供了一个destroy方法,它完全适用于我想要完成的任务.考虑到这一点,看起来我需要做的就是为静态创建的组件获取ComponentRef,然后使用其destroy函数(这个答案说明),但是当我尝试这个时,我得到一个错误,说"destroy是不是一个功能"即使我确实得到了一个对象.

这是我用于ViewChild的语法:

@ViewChild(MyComponent) myComponentRef: ComponentRef<MyComponent>;

而我的"破坏"电话:

private destroy() {
    this.myComponentRef.destroy();
}

这是在这里触发的:

<button (click)="destroy()">Destroy</button>

调用这个"destroy"方法适用于我动态创建但不是静态创建的组件.

编辑: 所以看起来这部分删除了组件,但不是来自DOM,这与在动态创建的组件上调用"destroy"时发生的行为不同.此外,当我点击我试图销毁的组件时,我的点击事件功能仍会触发.

编辑2:我更新了我的ViewChild语法,以显式读取ComponentRef并返回"undefined":

@ViewChild(MyComponent, {read: ComponentRef}) myComponentRef: ComponentRef<MyComponent>;

如果返回"未定义",那么我猜这可能是不可能的.