如何为Angular DataTables设置全局通用配置？

解决方案 #

你可以通过以下两种常用方式实现Angular DataTables的全局参数配置，适配你使用的Angular 12.2.3 + DataTables 12.0.0版本：

方式一：全局常量导出（最简单） #

1. 新建全局配置文件 src/app/config/datatables.config.ts，写入统一配置并导出：

import { DataTables } from 'angular-datatables';

export const GLOBAL_DT_OPTIONS: DataTables.Settings = {
    language: {
        paginate: {
            first: "",
            previous: "<<",
            next: ">>",
            last: ""
        }
    },
    lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]]
};

2. 任意需要使用DataTables的组件直接导入常量赋值即可：

import { GLOBAL_DT_OPTIONS } from 'src/app/config/datatables.config';

@Component({
  template: `<table datatable [dtOptions]="dtOptions"></table>`
})
export class YourComponent {
  dtOptions = GLOBAL_DT_OPTIONS;
}

方式二：依赖注入 + 组件封装（无重复代码最优解） #

如果不想每个组件都重复导入常量，可以结合Angular依赖注入和公共组件封装实现零配置调用：

1. 在上一步的配置文件中新增注入令牌：

import { InjectionToken } from '@angular/core';
import { DataTables } from 'angular-datatables';

export const GLOBAL_DT_OPTIONS: DataTables.Settings = {
    language: {
        paginate: {
            first: "",
            previous: "<<",
            next: ">>",
            last: ""
        }
    },
    lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]]
};

export const DT_OPTIONS = new InjectionToken<DataTables.Settings>('DT_OPTIONS', {
  providedIn: 'root',
  factory: () => GLOBAL_DT_OPTIONS
});

2. 封装公共DataTables组件 src/app/shared/components/datatable.component.ts：

import { Component, Input, Inject } from '@angular/core';
import { DT_OPTIONS } from 'src/app/config/datatables.config';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-datatable',
  template: `<table datatable [dtOptions]="mergedOptions" [dtTrigger]="dtTrigger"></table>`
})
export class DatatableComponent {
  // 支持传入自定义配置覆盖全局参数
  @Input() customOptions: Partial<DataTables.Settings> = {};
  @Input() dtTrigger: Subject<any> = new Subject();

  constructor(@Inject(DT_OPTIONS) private globalOptions: DataTables.Settings) {}

  get mergedOptions() {
    return {...this.globalOptions, ...this.customOptions};
  }
}

3. 在共享模块中声明并导出该公共组件后，所有业务组件无需额外配置即可直接调用：

<!-- 直接使用全局默认配置 -->
<app-datatable></app-datatable>

<!-- 需自定义部分参数时传入customOptions即可 -->
<app-datatable [customOptions]="{pageLength: 20}"></app-datatable>

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