DevExtreme DataGrid Angular 国际化 - 带源码

DevExtreme 实现国际化的步骤

创建项目

• 根据官方的 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