Question

我将尝试尽可能简单地解释我的问题：

我目前正在使用NgxDatatable来呈现粗体表。
我有一个名为CrudComponent的基本组件来处理所有杂物
该组件旨在扩展到所有简单的实体

我现在面临的问题是为后代提供一种注入自定义cellTemplate的方式。

我正在尝试避免代码重复，因此我不必只添加1-2 ng-template就重复复制父模板。

例如，我在CrudComponent中有

    @ViewChild('actionsCellRenderer') actionsCellRenderer: TemplateRef<any>;

在模板中：

    <ng-template #actionsCellRenderer let-row="row" let-value="value">
        <button mat-icon-button (click)="startEdit(row)">
            <fa-icon [icon]="['far', 'edit']"></fa-icon>
        </button>
        <button mat-icon-button (click)="startDelete(row)" color="warn">
            <fa-icon [icon]="['far', 'trash-alt']"></fa-icon>
        </button>
    </ng-template>

可以说我将CrudComponent扩展为MovieComponent。我需要手动将整个html模板复制到新的MovieComponent.html模板中并添加：

    @ViewChild('ratingCellRenderer') ratingCellRenderer: TemplateRef<any>;

    <ng-template #ratingCellRenderer let-row="row" let-value="value">
        <bar-rating
                [(rate)]="value"
                [max]="10"
                theme="horizontal"
                readOnly="true"
        ></bar-rating>
    </ng-template>

可能的解决方案：

解决此问题的一种方法是使用一些模板预编译器，例如twig。这有可能吗？如果可以，怎么办？
或更多角度解决方案。基本上像这样的TemplateRef<any>表：

cellRenderers = {
   rating: new TemplateRef<any>(), //but how do I manually create TemplateRef?
   picture: new TemplateRef<any>(),
}

然后在NgxDatatable列中定义：

{name: 'Score', prop: 'score', cellTemplate: this.cellRenderers['rating']},

或者也许还有另一种更优雅的方式来处理此问题？

Answer 1

我最终删除了NgxDatatable并编写了自己的CrudTable实现，其中包含ColumnRendererComponent：

import {Component, ComponentFactoryResolver, Input, OnInit, ViewChild, ViewContainerRef} from '@angular/core';
import {TableColumnType} from '../Table/TableColumnType';
import {FieldConfig} from '../../../Interface/FieldConfig';
import {RendererInterface} from './RendererInterface';
import {PlainRenderer} from './PlainRenderer';
import {FunctionRenderer} from './FunctionRenderer';

@Component({
    selector: 'column-renderer',
    template: `<ng-template #renderer></ng-template>`
})
export class ColumnRendererComponent implements OnInit {
    @Input() public value: any;
    @Input() public row: any;
    @Input() public column: FieldConfig;
    @Input() public columnType: TableColumnType;

    constructor(
        protected componentFactoryResolver: ComponentFactoryResolver,
        public viewContainerRef: ViewContainerRef
    ) {
    }

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

    loadRenderer() {
        let component = this.columnType.template ? this.columnType.template :
            (this.columnType.renderFn ? FunctionRenderer : PlainRenderer);
        let componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);

        let viewContainerRef = this.viewContainerRef;
        viewContainerRef.clear();

        let componentRef = viewContainerRef.createComponent(componentFactory);
        let instance = <RendererInterface>componentRef.instance;
        instance.column = this.column;
        instance.columnType = this.columnType;
        instance.row = this.row;
        instance.value = this.value;
    }
}

Angular 7动态可注射模板

1 个答案: