DevExtreme DataGrid Angular 國際化 - 帶源碼

時間 2019-11-09

標籤 devextreme datagrid angular 國際化源碼欄目 AngularJS 简体版

原文原文鏈接

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 等幾個對應的用於國際化的文件夾html

製做測試頁面顯示默認的英文

經過DevExtreme CLI 建立項目時生成的模板文件 src/pages/display-data/display-data.component.html，中爲表格追加屬性node

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

最終造成本模板文件的全部代碼以下：git

<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>

編譯從新運行項目能看到表格右邊有刪除按鈕了，點擊後彈出的提示是英文的，以下：
github

註冊而且調用國際化方法，顯示效果

在文件 tsconfig.json中註冊CLDR，在項目 compilerOptions下的代碼以下：typescript

"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 國際化 之間的代碼express

在目錄 src 建立文件 typings.d.ts，代碼以下：npm

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 項目下黏貼下面的代碼：json

"./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);
// 國際化代碼結束