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，中为表格追加属性

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

  Display Data
  
  
  
      
      
  
      
      
      
  
      
      
      
      
      
      
      
          
          
      
      
      
      
      
      
      
      
      
      
      
  
  

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

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

• 在文件 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