Angular 8 - 删除 ng-component 标签 - 表行模板

我有一个灵活的表格组件，有两种模式：

1. 普通表 - 有效
2. 自定义行模板 - 这不是因为角度添加<ng-component> tag

逻辑输入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 or ng-component tag?

我假设你的意思是“明显打破”表格是因为它不再正确呈现ng-component在。。之间tbody and tr元素。由于您创建了自定义组件并且没有声明自定义选择器，因此角度组件将使用默认值呈现ng-component选择器。组件简单地包装在选择器中； （据我所知）这是你无法阻止的。当在 html 输出中呈现时，组件只需要包装在选择器中即可。如果您不需要选择器，则应该使用指令（属性）。

但是，通过将以下样式添加到组件中可以简单地解决正确渲染表格的问题：

:host {
  display: contents;
}

阅读更多内容display: contents 在 MDN 上 https://developer.mozilla.org/en-US/docs/Web/CSS/display#display_contents。 当浏览器以 html 形式呈现该组件时，这将完全忽略该组件，只考虑它的内容。

因此，自定义行组件的声明可能如下所示：

@Component({
  //selector: 'my-row-component',
  templateUrl: './row.component.html',
  styles: [':host { display: contents }']
}

我注释掉了选择器，但是如果取消注释，您会看到默认选择器ng-component选择器将在 html 中相应地替换为您的自定义值，但不会对渲染产生影响。

I made 这里有一个 Stackblitz https://stackblitz.com/edit/angular-qyaujp?file=src/table/row/row.component.ts来演示这个解决方案。在此 Stackblitz 中，我将上面的代码示例简化为最低限度，以简单地展示其工作原理。