DevExtreme-DataGrid-Angular-国际化-带源码

jiezi

5 年前

根据官方的 Getting Started 的网址 https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/创建项目
在 cmd 中使用命令 npx -p devextreme-cli devextreme new angular-app i18n 创建项目，该项目名称是 i18n
创建成功后使用命令 cd i18n，切换路径到项目内，然后使用 ng serve --o，运行项目并且打开浏览器
此时打开浏览器后应该能看到 DevExtreme 的标准项目页面，如下：

打开新的 CMD 路径切换到项目的根目录下，使用命令 npm install --save-dev devextreme-cldr-data globalize 安装国际化包
安装完毕后在目录 D:\Java\Document\Angular\Demo\AAA.DevExtreme\i18n\node_modules 下会多出 globalize 等几个对应的用于国际化的文件夹

制作测试页面显示默认的英文

通过DevExtreme CLI 创建项目时生成的模板文件 src/pages/display-data/display-data.component.html，中为表格追加属性

    <dxo-editing 
        mode="row"
        [allowUpdating]="true"
        [allowDeleting]="true"
        [allowAdding]="true">
    </dxo-editing>

最终形成本模板文件的所有代码如下：

<h2 class="content-block">Display Data</h2>

<dx-data-grid class="dx-card wide-card"
    [dataSource]="dataSource"
    [showBorders]="false"
    [focusedRowEnabled]="true"
    [focusedRowIndex]="0"
    [columnAutoWidth]="true"
    [columnHidingEnabled]="true">

    <dxo-editing 
        mode="row"
        [allowUpdating]="true"
        [allowDeleting]="true"
        [allowAdding]="true">
    </dxo-editing>

    <dxo-paging [pageSize]="10"></dxo-paging>
    <dxo-pager [showPageSizeSelector]="true" [showInfo]="true"></dxo-pager>
    <dxo-filter-row [visible]="true"></dxo-filter-row>

    <dxi-column
        dataField="Task_ID"
        [width]="90"
        [hidingPriority]="2">
    </dxi-column>
    <dxi-column
        dataField="Task_Subject"
        [width]="190"
        caption="Subject"
        [hidingPriority]="8">
    </dxi-column>
    <dxi-column
        dataField="Task_Status"
        caption="Status"
        [hidingPriority]="6">
    </dxi-column>
    <dxi-column
        dataField="Task_Priority"
        caption="Priority"
        [hidingPriority]="5">
        <dxo-lookup
            [dataSource]="priority"
            valueExpr="value"
            displayExpr="name">
        </dxo-lookup>
    </dxi-column>
    <dxi-column
        dataField="ResponsibleEmployee.Employee_Full_Name"
        caption="Assigned To"
        [allowSorting]="false"
        [hidingPriority]="7">
    </dxi-column>
    <dxi-column
        dataField="Task_Start_Date"
        caption="Start Date"
        dataType="date"
        [hidingPriority]="3">
    </dxi-column>
    <dxi-column
        dataField="Task_Due_Date"
        caption="Due Date"
        dataType="date"
        [hidingPriority]="4">
    </dxi-column>
    <dxi-column
        dataField="Task_Priority"
        caption="Priority"
        [hidingPriority]="1">
    </dxi-column>
    <dxi-column
        dataField="Task_Completion"
        caption="Completion"
        [hidingPriority]="0">
    </dxi-column>
</dx-data-grid>

编译重新运行项目能看到表格右边有删除按钮了，点击后弹出的提示是英文的，如下：

在文件 tsconfig.json中注册 CLDR，在项目 compilerOptions 下的代码如下：

"paths": {
      // DevExtreme 国际化
      "globalize": ["node_modules/globalize/dist/globalize"],
      "globalize/*": ["node_modules/globalize/dist/globalize/*"],
      "cldr": ["node_modules/cldrjs/dist/cldr"],
      "cldr/*": ["node_modules/cldrjs/dist/cldr/*"],
      // DevExtreme 国际化 结束

      "jszip": ["node_modules/jszip/dist/jszip.min.js"]
    }

最后一个项目 jszip 在创建项目时自动建立的，所以实际是黏贴上面的 DevExtreme 国际化 之间的代码

在目录 src 创建文件 typings.d.ts，代码如下：

declare module 'globalize' {
    const value: any;
    export default value;
}
 
declare module 'devextreme/localization/messages/*' {
    const value: any;
    export default value;
}
 
declare module 'devextreme-cldr-data/*' {
    const value: any;
    export default value;
}

在 angular.json 的两个 scripts 项目下黏贴下面的代码：

              "./node_modules/cldrjs/dist/cldr.js",
              "./node_modules/globalize/dist/globalize.js"

将下面代码贴到 app.module.ts 中的所有 import下 @NgModule上

// 下面开始是国际化代码
import "devextreme/localization/globalize/number";
import "devextreme/localization/globalize/date";
import "devextreme/localization/globalize/currency";
import "devextreme/localization/globalize/message";
 
// Dictionaries for German and Russian languages
// import deMessages from "devextreme/localization/messages/de.json!json";
// import ruMessages from "devextreme/localization/messages/ru.json!json";
 
// Common and language-specific CLDR JSONs
// 在 2019 年 6 月 22 日 09:38:24 测试这里代码要注释掉，使用下面的方式导入对应语言的 json
// import supplemental from "devextreme-cldr-data/supplemental.json!json";
// import deCldrData from "devextreme-cldr-data/de.json!json";
// import ruCldrData from "devextreme-cldr-data/ru.json!json";

 
// In projects created with Angular CLI 6+
import deMessages from "devextreme/localization/messages/de.json";
import ruMessages from "devextreme/localization/messages/ru.json";
import zhMessages from "devextreme/localization/messages/zh.json";
import supplemental from "devextreme-cldr-data/supplemental.json";
import deCldrData from "devextreme-cldr-data/de.json";
import ruCldrData from "devextreme-cldr-data/ru.json";
import zhCldrData from "devextreme-cldr-data/zh.json";
 
import Globalize from "globalize";
 
Globalize.load(supplemental, deCldrData, ruCldrData,zhCldrData);
 
Globalize.loadMessages(deMessages);
Globalize.loadMessages(ruMessages);
Globalize.loadMessages(zhMessages);
 
Globalize.locale(navigator.language);
// 国际化代码结束

上面修改的配置中要求结束当前运行的项目，重新使用 ng serve --o 运行后正常，效果如下：

https://stackblitz.com/github/chanchaw/DevExtremeGlobalize

DevExtreme-DataGrid-Angular-国际化-带源码

DevExtreme 实现国际化的步骤

创建项目

下载安装国际化包

制作测试页面显示默认的英文

注册并且调用国际化方法，显示效果

在线演示