ag-grid 自定义加载器作为指令

Question

我在我的项目中使用 ag-grid-angular。我在我的应用程序的不同页面中使用了 20 多次 ag-grid-angular 。在这里，我在加载数据之前使用自定义加载器。我需要使用自定义加载器作为指令，以便我可以在我所有的 ag-grid-angular 中重新使用。但是现在我只能在每个组件中声明加载模板。

<ag-grid-angular
    style="width:100%;height:300px;"
    class="ag-theme-alpine"
    [columnDefs]="columnDefs"
    [rowData]="rowData"
    [overlayLoadingTemplate]="loadingTemplate"
    [overlayNoRowsTemplate]="overlayNoRowsTemplate"
    (gridReady)="onGridReady($event)"
    [columnDefs]="columnDefs">

并在 component.ts

this.loadingTemplate = "<b>Example Loader</b>"

请提供一个代码在任何地方使用的建议。

谢谢！

Answer 1

是的，可以使用可以在构造函数中注入网格组件的指令：

ag-grid-loading.directive.ts

import { Directive } from "@angular/core";
import { AgGridNg2 } from "ag-grid-angular";

@Directive({
  selector: "ag-grid-angular"
})
export class AgGridLoadingDirective {
  constructor(private grid: AgGridNg2) {
    grid.overlayLoadingTemplate = "<b>Example Loader</b>";
  }
}

确保这个指令在你所有的 NgModule 中都是可见的。

现在，您可以从所有网格中删除 overlayLoadingTemplate 绑定。

Stackblitz Example

ag-grid 自定义加载器作为指令

ag-grid custom loader as directive

angular

ag-grid-angular