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

Question

我正在尝试在我的应用程序中添加一个功能。它像拖放编辑器一样工作。我需要将一个组件放到一个确定的区域，应用程序必须动态构建该组件。对于没有子项的简单组件（例如输入），它可以很好地使用此代码：

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);

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

我必须构建以使其有效的结构示例：

<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结构：

<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-列结构：

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

app-table-header结构：

<ng-content></ng-content>

app-table-行结构：

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

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

Answer 1

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

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

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

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

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

Render complex structured components on the fly

angular-directive

angular-components

angular