Angular应用中如何全局配置ag-grid-angular组件的默认属性？

当然可以，下面是几种实用的实现方式，能帮你统一管理所有AG Grid实例的公共配置：

1. 封装自定义Angular组件（最推荐，维护成本低） #

直接封装一个属于你项目的AG Grid组件，把所有公共属性、事件都预先配置好，只暴露需要每个实例单独自定义的部分。这样后续修改公共配置时，只需要改这一个组件，所有用到的地方都会自动生效。

示例代码： #

自定义组件模板（app-ag-grid.component.html）

<ag-grid-angular
  style="width: 100%; height: 100%"
  class="ag-theme-alpine"
  [modules]="modules"
  [animateRows]="true"
  [defaultColDef]="defaultColDef"
  [localeText]="localeText"
  [gridOptions]="gridOptions"
  [statusBar]="statusBar"
  [rowModelType]="rowModelType"
  (gridReady)="onGridReady.emit($event)"
  [columnDefs]="columnDefs"
></ag-grid-angular>

自定义组件逻辑（app-ag-grid.component.ts）

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { ModuleRegistry } from '@ag-grid-community/core';
import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
import { StatusBarModule } from '@ag-grid-enterprise/status-bar';

// 注册AG Grid所需模块
ModuleRegistry.registerModules([ClientSideRowModelModule, StatusBarModule]);

@Component({
  selector: 'app-ag-grid',
  templateUrl: './app-ag-grid.component.html'
})
export class AppAgGridComponent {
  // 公共配置直接在这里定义，无需每个实例重复传入
  modules = [ClientSideRowModelModule, StatusBarModule];
  animateRows = true;
  defaultColDef = {
    sortable: true,
    filter: true,
    resizable: true
    // 你的其他全局默认列配置
  };
  localeText = {
    // 你的全局本地化文本配置
  };
  gridOptions = {
    // 你的全局默认GridOptions配置
  };
  statusBar = {
    statusPanels: ['agTotalRowCountComponent']
    // 你的全局默认状态栏配置
  };
  rowModelType = 'clientSide';

  // 暴露需要每个实例自定义的输入属性
  @Input() columnDefs: any[] = [];
  // 暴露需要每个实例自定义的输出事件
  @Output() gridReady = new EventEmitter<any>();
}

项目中使用自定义组件

<app-ag-grid
  [columnDefs]="myPageColumnDefs"
  (gridReady)="handleGridReady($event)"
></app-ag-grid>

2. 利用AG Grid全局默认配置 #

AG Grid本身支持设置全局默认的GridOptions，适合统一配置AG Grid内部的功能项（比如列默认配置、动画、行模型类型等）。但DOM层面的属性（比如宽高、样式类）无法通过这种方式统一，需要配合其他方法。

示例代码（在app.module.ts或全局配置文件中） #

import { GridOptions } from '@ag-grid-community/core';

// 设置AG Grid全局默认配置
GridOptions.defaultAnimateRows = true;
GridOptions.defaultRowModelType = 'clientSide';
GridOptions.defaultColDef = {
  sortable: true,
  filter: true,
  resizable: true
};
GridOptions.defaultLocaleText = {
  // 你的全局本地化文本
};

总结 #

如果需要同时统一DOM属性和AG Grid内部配置，优先选择封装自定义组件的方式，逻辑清晰、易于维护；如果只需要统一AG Grid的功能配置，可以使用全局默认配置的方式。

内容的提问来源于stack exchange，提问作者mordechai