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