Angular 8 - удалить тег ng-component - шаблон строки таблицы - PullRequest
0 голосов
/ 05 июля 2019

У меня есть компонент гибкой таблицы, который имеет 2 режима:

  1. Обычная таблица - которая работает
  2. Пользовательский шаблон строки - который не работает, поскольку угловая добавляет <ng-component> тег

Логика в TableComponent не важна, шаблон:

<table class="table table-hover table-sm table-middle table-crud">
    <thead role="rowgroup">
        <!-- SNIP -->
    </thead>
    <tbody *ngIf="customRowComponent" crud-table-row-renderer
            [renderComponent]="customRowComponent"
            [rows]="rows"
            [columns]="columns"
            [config]="config"
            [parent]="parent"
            [rowActions]="rowActions"
            [cellActionEmitter]="cellActionEmitter"
            [selectedRows]="selectedRows">
    </tbody>
    <tbody *ngIf="!customRowComponent" crud-table-row
            [rows]="rows"
            [columns]="columns"
            [config]="config"
            [parent]="parent"
            [rowActions]="rowActions"
            [cellActionEmitter]="cellActionEmitter"
            [selectedRows]="selectedRows">
    </tbody>
</table>

И, как видите, все зависит от customRowComponent.

Если яне устанавливайте его, таблица работает отлично:

<tbody>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</tbody>

Однако, как только я использую некоторый пользовательский компонент строки, html становится так:

<tbody>
    <div custom-row-selector>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </div>
</tbody>

, что явно нарушает работу таблицы.Компонент, который используется для визуализации пользовательского компонента, выглядит следующим образом:

@Component({
    selector: '[crud-table-row-renderer]',
    template: '<ng-template #container></ng-template>',
})
export class RowRenderer implements OnInit, OnChanges {
    @Input() public config = new TableConfig();
    @Input() public columns: FieldConfig[];
    @Input() public rows: any[];
    @Input() public rowActions: RowAction[];
    @Input() public parent: any;
    @Input() public renderComponent: any;
    @Input() public selectedRows: number[];

    @Input() public cellActionEmitter: any;

    @ViewChild('container', {read: ViewContainerRef, static: true}) viewContainer: ViewContainerRef;

    instance: TableRowComponentInterface;

    constructor(
        @Host() public host: ElementRef,
        protected componentFactoryResolver: ComponentFactoryResolver,
    ) {
    }

    ngOnInit(): void {
        this.loadRenderer();
    }

    ngOnChanges(changes: SimpleChanges): void {
        if (changes && changes.rows && changes.rows.currentValue) {
            this.instance.rows = changes.rows.currentValue;
        }
    }

    loadRenderer() {
        const component = this.renderComponent;
        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
        const viewContainerRef = this.viewContainer;

        const componentRef = viewContainerRef.createComponent(componentFactory);
        this.instance = componentRef.instance as TableRowComponentInterface;
        this.instance.config = this.config;
        this.instance.columns = this.columns;
        this.instance.rows = this.rows;
        this.instance.rowActions = this.rowActions;
        this.instance.parent = this.parent;
        this.instance.selectedRows = this.selectedRows;
        this.instance.cellActionEmitter = this.cellActionEmitter;
    }
}

Поэтому большой вопрос: Как убедиться, что angular не переносит этот динамически созданный компонент в divили ng-component тег?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...