Визуализация сложных структурированных компонентов на лету - PullRequest
Новая
       1

Визуализация сложных структурированных компонентов на лету

2 голосов
/ 16 апреля 2020

Я пытаюсь сделать функцию в своих приложениях. Он работает как редактор перетаскивания. Мне нужно поместить компонент в определенную область, и приложение должно создать его на лету. С простыми компонентами, которые не имеют дочерних элементов (например, входные данные), он прекрасно работает с этим кодом: 

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>

таблица приложений структура столбца: 

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

структура заголовка таблицы приложения: 

<ng-content></ng-content>

структура строки таблицы приложения: 

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

Плюс: когда у меня есть для удаления независимого компонента внутри другого независимого компонента это также работает. Моя проблема в том, что компоненты зависят друг от друга для правильной визуализации. Может кто-нибудь помочь мне, пожалуйста?

1 Ответ

0 голосов
/ 22 апреля 2020

В своем исследовании, чтобы найти решение, я обнаружил, что QueryList не обновляется, когда я удаляю компонент столбца, потому что компонент - это просто шаблон без содержимого.

Поэтому мне пришлось изменить событие удаления на обновите QueryList напрямую: 

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

Я знаю, что это не идеальное решение, но оно работает.

...