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

在我的一个项目中,我尝试在表格中显示Angular Components(如自动完成下拉搜索).由于我的要求(比如用ctrl+点击多选不同的单元格),我决定给它一个动手的去.

我使用了handontable渲染器并动态添加组件.

代码看起来像这样

matrix.component.ts

       this.hot = new Handsontable(this.handsontable.nativeElement, {
            data: this.tableData,
            colWidths: [80, 300],
            colHeaders: ['Id', 'Custom Component'],
            columns: [
                {
                    data: 'id',
                },
                {
                    data: 'id',
                    renderer: (instance: any, td: any, row: any, col: any, prop: any, value: any, cellProperties: any) => {
                        if (cellProperties.hasOwnProperty('ref')) {
                            (cellProperties.ref as ComponentRef<CellContainerComponent>).instance.value = row;
                        } else {
                            cellProperties.ref = this.loadComponentAtDom(
                                CellContainerComponent,
                                td,
                                ((component: any) => {
                                    component.template = this.button4Matrix;
                                    component.value = row;
                                }));
                        }
                        return …

使用类似这样的内容： https://netbasal.com/dynamically-creating-components-with-angular-a7346f4a982d 我正在添加多个组件，问题是稍后如何根据单击的组件删除这些组件？我想做的是创建面包屑，然后单击面包屑时，将其下方的所有内容全部删除。为了创建它们，我使用以下代码：

createCrumb(name, key, level){
  let data = {name:name, key:key, level,level, diagram: this.diagram};
  const factory = this.this.resolver.resolveComponentFactory(BreadCrumbsButton);
  let componentRef = this.container.createOmponent(factory);
  (<BreadCrumbsButton>componentRef.instance).data = data;
}

所有这些都很完美，但我添加了它的倍数。问题是如何删除特定的而保留其余的？

我必须创建一个多选过滤器来接受要单击的多个选项值，以便优化后端某些获取 API 端点的响应。

每当用户单击一个选项时，就会动态呈现一个“芯片”组件以感知用户：“嘿，您只需通过这个和那个过滤选项来过滤结果”

在互联网上环顾四周，我发现了这个stackblitz

在此代码示例中，我以某种方式理解了这一行：

let componentFactory = this.CFR.resolveComponentFactory(ChildComponent);\nlet childComponentRef = this.VCR.createComponent(componentFactory);\n

我们将给定子组件的实例插入到ViewContainerRef. 找到一个类似这样的对象：

_data: Object { renderElement: <!--  -->, componentView: undefined, viewContainer: {\xe2\x80\xa6}, \xe2\x80\xa6 }\n_elDef: Object { nodeIndex: 4, bindingIndex: 0, outputIndex: 1, \xe2\x80\xa6 }\n_embeddedViews: Array(5) [ {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, \xe2\x80\xa6 ] //here   \n_view: Object { def: {\xe2\x80\xa6}, parent: {\xe2\x80\xa6}, state: 1036, \xe2\x80\xa6 }\n

__embeddedViews动态生成的视图将堆叠在对象下的位置

稍后为了决定删除哪些视图，此 stackblitz 的创建者只需获取组件并创建一个ViewContainerRef.indexOf(component)来获取存储组件的索引，并验证动态生成的组件是否存在于该数组中。然后他/她只需删除调用的视图this.ViewContainerRef.remove(index);

有趣的是，在我的实现中，当我登录时，ViewContainerRef我得到这个对象作为响应：