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