相关疑难解决方法(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

我正在寻找一种方法来从另一个组件的代码中实例化Angular2中的组件.与许多提出类似问题的人不同,我对动态编译新组件并不感兴趣,只是实例化并插入已存在于我的应用程序中的组件.

例如:

说我有两个组成部分:

仪表板item.component.ts

import { Component } from "@angular/core";

@Component({
    selector: "dashboard-item",
    template: "Some dashboard item with functionality"
})
export class DashboardItemComponent {
    constructor() {}

    onInit() {}
}

dashboard.component.ts

import { Component } from "@angular/core";

@Component({
    selector: "dashboard",
    template: "<h1>Dashboard!</h1><div #placeholder></div>"
})
export class DashboardComponent {
    constructor() {}

    onInit() {}
}

我正在寻找的是一种在DashboardComponent的onInit中创建DashboardItemComponent并将其添加到#placeholder div的方法.

有两点需要注意:

• 我需要能够使用子组件的输入/输出
• 我明确地没有谈论像这两个问题所描述的那样动态编译新组件:如何使用/创建动态模板来使用Angular 2.0编译动态组件？和Angular 2中的$ compile相当

这两个早期的问题提出了类似的问题,但他们的答案要么相当平淡,要么与Angular2的早期(beta)版本相关,而且似乎不再起作用.

• 如何实例化和渲染Angular2组件？
• 是否可以手动实例化角度2中的组件