Ng-Matero V10 正式發佈！

Angular v10 在六月下旬就悄無聲息的發佈了，雖然 v9 的發佈延期了兩個月，可是 v10 並無受影響，仍然如期而至。

相比 v9 的重量級發佈，v10 並無顛覆性的變化，主要仍是 bug 修復及細節優化。經過 ng new 生成的項目目錄稍有不一樣，不過不用擔憂，使用 ng update 直接升級便可，CLI 會自動幫你替換這些文件，沒有任何阻礙。

再來講一下 Angular Material， v10 有一個很是大的變化，就是增長了 datepicker 的區間選擇功能，不用多說，這是一個極其實用的功能。相比不少第三方實現來講，官方組件的交互細節就是贊。

在 Angular v10 發佈不久，當即就有人提 issue 要求 Ng-Matero 也升級到 v10，因爲受限於第三方組件庫及其它細節考慮，遲遲沒有更新。耽誤了一個多月，趁本週不太忙，終於完成了升級。其實 v10 版本除了將 Angular 和 Angular Material 升級以外，主要是調整了 schematics ng add 的兼容問題，其它代碼和 v9 最新版是同樣的。前期的工做主要是完善 v9 的版本。

本文主要說一下 Ng-Matero 以及 Material Extensions 幾個關鍵的優化點。

國際化

Material Extensions

主要是 Data Grid 的國際化支持，涉及表頭、操做按鈕、彈窗等，該功能的版本須要 >=9.10.0。

最開始的國際化方案是遍歷 columns 數據賦值，實現方式比較粗糙，不夠優雅。最終參考了 ngx-formly 的設計方案，每一個文本都支持傳入響應式數據流，以 ngx-translate 爲例，經過 translate.stream 監聽語言變化便可。

columns: MtxGridColumn[] = [
    {
      header: this.translate.stream('name'),
      field: 'name',
    },
    ...
    {
      header: this.translate.stream('operation'),
      field: 'operation',
      type: 'button',
      buttons: [
        {
          type: 'basic',
          text: this.translate.stream('delete'),
          icon: 'delete',
          tooltip: this.translate.stream('delete'),
          color: 'warn',
          pop: true,
          popTitle: this.translate.stream('confirm_delete'),
          popCloseText: this.translate.stream('close'),
          popOkText: this.translate.stream('ok'),
          click: () => {
            alert('delete');
          },
        },
      ],
    },
  ];

在線示例：https://ng-matero.github.io/extensions/data-grid#i18n-ngx-translate

Ng-Matero

Ng-Matero 在 9.2.0 的時候已經增長了 i18n 相關的代碼及示例，可是並不完善。在 9.6.0 的時候重點增長了 formly 的校驗提示的 i18n，並且關於 formly 的全局配置模塊也移到了 app 根目錄。這個變更主要是考慮到 formly 表單模塊的重要性以及目錄結構的合理性。

在線示例：https://ng-matero.github.io/ng-matero/#/forms/dynamic

主題化

主題化的內容能夠說不少，暫時不展開講，簡單說一下 Material Extensions 和 Ng-Matero 在主題配置方面的改動。

Material Extensions

擴展組件庫的大部分組件都作了主題樣式分離，從 9.11.0 以後必需要定義主題樣式。熟悉 Material 組件庫的朋友應該都不陌生。

@import '~@ng-matero/extensions/theming';

@include material-extensions-theme($theme);

主題化改動最大的組件是 mtx-select，由於 ng-select 不支持主題定製，因此 mtx-select 重寫了 ng-select 的全部樣式。

在線示例：https://ng-matero.github.io/extensions/select

Ng-Matero

首先對 theme 模塊下面的樣式進行了重構，組件樣式都移到了獨立的文件夾中，另外將主題樣式分離出來，經過 _app-theme.scss 文件整合全部和應用相關的主題樣式。

@import '~@ng-matero/extensions/theming';
@import '~@mat-datetimepicker/core/datetimepicker/datetimepicker-theme.scss';

@import '../app/theme/style/reboot-theme';
@import '../app/theme/header/header-theme';
@import '../app/theme/sidebar/sidebar-theme';
@import '../app/theme/sidemenu/sidemenu-theme';
@import '../app/theme/topmenu/topmenu-theme';
@import '../app/theme/customizer/customizer-theme';
@import '../app/shared/components/error-code/error-code-theme';

@import './custom/table-theme';

// Styles for the app that are based on the current theme.
@mixin matero-admin-theme($theme) {
  @include material-extensions-theme($theme);
  @include mat-datetimepicker-theme($theme);

  @include matero-reboot-theme($theme);
  @include matero-header-theme($theme);
  @include matero-sidebar-theme($theme);
  @include matero-sidemenu-theme($theme);
  @include matero-topmenu-theme($theme);
  @include matero-customizer-theme($theme);
  @include matero-error-code-theme($theme);

  @include custom-table-theme($theme);
}

除此以外，Ng-Matero 在樣式上作了不少細節優化，好比側邊欄的主題樣式。

在線示例：https://ng-matero.github.io/ng-matero/#/dashboard

總結

不知不覺，距離 Ng-Matero 初版發佈立刻就滿一年。短暫的一年中經歷了不少，往事不堪回首，感謝全部朋友以及素未謀面的陌生人的支持。

目前的重點依然是開發 Material Extensions 組件庫以及完善文檔。若是你們對 Angular Material 感興趣或者在開發過程當中遇到了問題，歡迎聯繫我或者加入自助 QQ 羣。