Ng-Matero V10 正式釋出！

敘帝利發表於2020-08-16

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

相關文章