动态更改 DataTables.net 表本地化

Question

我将 Angular 7 与 l-lin 创建的 DataTables.net 的 Angular DataTables 包装器一起使用。我的任务是在不重新创建表本身的情况下动态更新表的本地化。实际上，我找到了有关如何执行此操作的答案，但我不想退出 Angular DataTables 接口太远。所以我编写了以下 Angular 服务。我想分享我对问题的解决方案，如果有人分享更好的解决方案，我会很高兴。

Answer 1

服务：

import { Injectable } from '@angular/core';

import { DataTableDirective } from 'angular-datatables';

@Injectable()
export class DataTablesHelpersService {
    public createDataTablesLanguageObject(
        localizationResources: any
    ): DataTables.LanguageSettings {
        return {
            emptyTable: localizationResources['dt_sEmptyTable'],
            info: localizationResources['dt_sInfo'],
            infoEmpty: localizationResources['dt_sInfoEmpty'],
            infoFiltered: localizationResources['dt_sInfoFiltered'],
            infoPostFix: localizationResources['dt_sInfoPostFix'],
            thousands: localizationResources['dt_sInfoThousands'],
            lengthMenu: localizationResources['dt_sLengthMenu'],
            loadingRecords: localizationResources['dt_sLoadingRecords'],
            processing: localizationResources['dt_sProcessing'],
            search: localizationResources['dt_sSearch'],
            searchPlaceholder: localizationResources['dt_sSearchPlaceholder'],
            zeroRecords: localizationResources['dt_sZeroRecords'],
            paginate: {
                first: localizationResources['dt_oPaginate_sFirst'],
                last: localizationResources['dt_oPaginate_sLast'],
                next: localizationResources['dt_oPaginate_sNext'],
                previous: localizationResources['dt_oPaginate_sPrevious']
            },
            aria: {
                sortAscending: localizationResources['dt_oAria_sSortAscending'],
                sortDescending:
                    localizationResources['dt_oAria_sSortDescending'],
                paginate: {
                    first: localizationResources['dt_oAria_oPaginate_sFirst'],
                    last: localizationResources['dt_oAria_oPaginate_sLast'],
                    next: localizationResources['dt_oAria_oPaginate_sNext'],
                    previous:
                        localizationResources['dt_oAria_oPaginate_sPrevious']
                }
            }
        };
    }

    public updateDtLocalization(
        dataTableDirective: DataTableDirective,
        localizationResources: any
    ) {
        dataTableDirective.dtInstance.then((dataTable: DataTables.Api) => {
            // Get table settings.
            const dataTableSettings = dataTable.settings();

            // Get existing DataTables localization object.
            const existingDtLocalizationObject = dataTableSettings[0].oLanguage;

            // Create DataTables localization object using new localization resources.
            const newDtLocalizationData = this.createDataTablesLanguageObject(
                localizationResources
            );

            // Recursively copy fields from a new localization object to an existing
            // localization object used by the table.
            this.updateDtLocalizationObject(
                existingDtLocalizationObject,
                newDtLocalizationData
            );

            // Redraw the table to update the text.
            dataTable.draw('full-hold');
        });
    }

    public updateDtLocalizationObject(
        existingDtLocalizationObject: DataTables.LanguageSettings,
        newLocalizationDataSource: DataTables.LanguageSettings
    ) {
        this.copyValuesFromSourceToDestinationRecursive(
            newLocalizationDataSource,
            existingDtLocalizationObject
        );
    }

    private copyValuesFromSourceToDestinationRecursive(
        source: any,
        destination: any
    ) {
        for (var field in source) {
            let mappedField: string;
            if (destination._hungarianMap) {
                mappedField = destination._hungarianMap[field];
            }

            if (typeof source[field] === 'object') {
                this.copyValuesFromSourceToDestinationRecursive(
                    source[field],
                    destination[field]
                );
                if (mappedField) {
                    this.copyValuesFromSourceToDestinationRecursive(
                        source[field],
                        destination[mappedField]
                    );
                }
            } else {
                destination[field] = source[field];
                if (mappedField) {
                    destination[mappedField] = source[field];
                }
            }
        }
    }
}

在带有表格的组件中：

import { DataTableDirective } from 'angular-datatables';

...

@ViewChild(DataTableDirective) private datatableElement: DataTableDirective;

...

constructor(
    ...
    private dataTablesHelpersService: DataTablesHelpersService,
    ...
) { }

...

private someMethod() {
    if (this.datatableElement) {
        // Pass the table and your new object with localization resources to the method.
        // This example uses a simple POJO key-value format object as an object
        // with localization resources for the entire application.
        this.dataTablesHelpersService.updateDtLocalization(
            this.datatableElement,
            yourResourcesObject
        );
    }
}

...