即时渲染复杂的结构化组件

Posted 2023-02-22

【中文标题】即时渲染复杂的结构化组件

【英文标题】：Render complex structured components on the fly

【发布时间】：2020-07-30 02:35:31

【问题描述】：

我正在尝试在我的应用程序中创建一个功能。 它就像一个拖放编辑器。 我需要将一个组件放入一个确定的区域，并且应用程序必须即时构建该组件。 对于没有子级的简单组件（例如输入），它可以很好地使用以下代码：

const componentFactoryResolver = moduleRef.componentFactoryResolver;
const factories = Array.from(componentFactoryResolver['_factories'].keys());
const factoryClass = <Type<any>>factories.find((x: any) => x.name === component.name);
const factory = componentFactoryResolver.resolveComponentFactory(factoryClass);
const componentRef: ComponentRef<any> = factory.create(this.injector);
this.appRef.attachView(componentRef.hostView);

但是当我必须渲染一个必须有子组件的组件时（比如表格）它不起作用。

我必须构建的结构示例：

<app-table value="dataValues">
    <app-table-column prop='foo'>
        <app-table-header>Foo </table-header>
    </app-table-column>
    <app-table-column prop='lorem'>
        <app-table-header>Lorem</table-header>
    </app-table-column>
</app-table>

组件应用表结构：

<table>
    <thead>
        <tr>
            <th class="table-tree-header" *ngFor="let column of columns">
                <ng-container *ngTemplateOutlet="column.template"></ng-container>
            </th>
        </tr>
    </thead>
    <tbody>
        <app-table-row *ngFor="let row of dataSource; let i = index"
            [id]="row['id']"
            [row]='row'
            [columns]='columns'
            class="table-tree-row"
            [parentId]="row['parentId']"
            [isParent]="row['isParent']"
            [rowIndex]='i'
            [lvl]="row['lvl']">
        </app-table-row>
    </tbody>
</table>

app-table-column 结构：

<ng-template>
    <ng-content>
    </ng-content>
</ng-template>

app-table-header 结构：

<ng-content></ng-content>

应用表行结构：

<tr>
    <td class="table-row" *ngFor="let column of columns">
        row[column.prop]
    </td>
</tr>

另外：当我必须将一个独立组件放入另一个独立组件中时，它也可以工作。 我的问题是当组件相互依赖才能正确渲染时。 谁能帮帮我？

【参考方案1】：

在我寻找解决方案的研究中，我发现当我删除列组件时 QueryList 并没有更新，因为该组件只是一个没有内容的模板。

所以我不得不更改 drop 事件来直接更新 QueryList：

const col = new TableColumnComponent();
col.prop = 'plataforma';
this.table.columns.reset([...this.table.columns.toArray(), col]);

我知道这不是完美的解决方案，但它确实有效。