前言

Angular 按照既定的發版計劃在 11 月中旬發布了 v15 版本。推遲了一個月（幾乎每個版本都是這個節奏??），Ng-Matero 也終于更新到了 v15。其實 Ng-Matero 本身的更新非常簡單，但是同步維護的 Material Extensions 這個庫要先于 Ng-Matero 發布，所以大部分精力都耗費在組件庫上面了。

我已經很久沒有寫關于 Ng-Matero 的發版文章了。上次介紹發版還是 v10 版本，竟然已經是兩年前的事情了。在這兩年的開源生涯中，主要精力都在 Material 的擴展組件庫上面。值得興奮的是，就在 2022 即將過去時，Material Extensions 的周下載量終于破萬了??，六月份時這個數據還只是 5k+。從 0 到 5k 用了兩年，而從 5k 到 1w 只用了半年。

本文主要聊一下 Ng-Matero 升級 v15 時遇到的一些問題及感觸。同時也簡單說一下近期在 v14 中新增的幾個功能。

GitHub: https://github.com/ng-matero/ng-matero

日期時間組件 Datetimepicker 的重磅更新

日期時間組件 datetimepicker 是在 v12 中添加的，同時也增加了 moment-adapter 日期模塊。但是 datetimepicker 的時間選擇模塊并沒有完全遵循 Material 規范（缺少時間輸入模式），這也影響了很多需求的實現。在外國友人的幫助下，14.6.0 終于加上了時間輸入功能，效果如下所示：

?? 在線體驗地址

時間輸入功能默認是關閉的，需要添加 timeInput 參數啟用該特性。

<mat-form-field>
  <input [mtxDatetimepicker]="datetimePicker" matInput>
  <mtx-datetimepicker #datetimePicker [timeInput]="true"></mtx-datetimepicker>
  <mtx-datetimepicker-toggle [for]="datetimePicker" matSuffix></mtx-datetimepicker-toggle>
</mat-form-field>

另外一個比較重要的更新是增加了 luxon-adapter 和 date-fns-adapter 兩個日期模塊，這算是和 Angular Material 對齊了，同樣要感謝外國友人的幫助。具體使用方式可以參考這個 issue。

側邊欄導航的焦點管理

側邊欄導航的聚焦功能是在 14.3.0 中添加的，可能很多人沒有注意到這個不顯眼的功能（使用 TAB 鍵即可快速的切換焦點，按 space 或者 enter 鍵可以展開收起二級菜單，按 enter 鍵可以跳轉路由）。具體效果如下圖所示：

?? 在線體驗地址

焦點管理屬于 a11y 的范疇，使用 Angular Material 可以很輕松的完成 a11y 的需求，同時 Angular CDK 中也有 A11yModule 用于自定義焦點管理，總之非常方便。但是我并沒有借助 CDK 來實現側邊欄導航的聚焦，只是使用了原生的 HTML 標簽，具體方法不在此贅述，感興趣的小伙伴可以留言咨詢。

另外，側邊欄菜單按鈕使用語義化標簽進行了優化，關于按鈕的選擇可以參考 Angular Material 在 Button 文檔中的說明：

Angular Material 使用原生的 <button> 和 <a> 元素，來保留默認的無障礙性體驗。 當要執行某些動作時，應該使用 <button> 元素。 當用戶要導航到其它視圖時，應該使用 <a> 元素。

很多人可能覺得這個功能不重要，但是作為一個交互細節強迫癥患者來說，真的無法忍受按 TAB 鍵時焦點亂飛且不知所蹤的問題。題外話，我好奇的嘗試了大部分高人氣的 admin 后臺（包括其它技術棧 React、Vue），發現 99% 的項目都沒有處理 TAB 聚焦??。

基于 MDC 的 Angular Material 組件

我覺得 v15 最大的變化不是 Angular，而是 Angular Material。大部分組件都切換到了 MDC 風格，之前這些組件都是在 material-experimental 這個庫中，現在轉正了，而之前的組件都加上了 legacy- 前綴。

直接使用 ng update 升級的話，所有引用的組件都會自動改為 legacy 組件，所以并不會出現 break changes，但是 legacy 的組件都被標記為 deprecated（會顯示中劃線），看起來不舒服。update 完成之后可以再使用遷移工具將指定的組件升級到 MDC，還是挺方便的。詳情參考官方文檔 遷移到基于 MDC 的 Angular Material Components，里面詳細介紹了組件的變化內容以及升級時的注意事項。

說一下自己的感受：

在第一次得知 Angular 官方將在 v15 全面遷移 MDC 時，內心還是很抵觸的，主要是覺得 MDC 的很多效果做的不如 Angular Material 細膩（比如 form-field 的過渡動畫）。但是在陸續升級完擴展組件庫及 ng-matero 之后，發現 MDC 還是挺香的。很多樣式得到優化，不需要自己再用 patch 方式修補（比如 icon 按鈕的 hover 效果）。

影響最大的組件應該是 slider 和 chips，之前的寫法都會報錯，必須手動修復。再就是 card 組件，必須配合 mat-card-content 才會出現邊距，如果用到的 card 組件很多，這塊的工作量也挺大的。如果項目中有對 Material 樣式的魔改，大部分的樣式需要將 class 前綴 .mat- 替換成 .mat-mdc-。

另外，form-field 組件移除了 legacy 樣式，其實我最喜歡的還是這個風格。比較坑的是外層容器使用了 overflow: hidden 屬性，影響到了 Material Extensions 中的 select 組件，暫時通過設置默認參數 appendTo="body" 臨時修復，后面再考慮更好的方案。

停止更新的 Angular Flex-Layout

萬萬沒想到 Angular Flex-Layout 竟然不再更新到 v15，雖然早就知道一直處于 beta 版本的 Flex-Layout 會在某個版本發生重大變化，但是等來的不是轉正而是棄更??。Angular 官方還專門寫了一篇文章來介紹這件事，建議使用 CSS 來替換 Flex-Layout。其實 Flex-Layout 和 CSS 并不能完全劃等號，Flex-Layout 是一套指令集，GitHub 上面有下面一段介紹：

The real power of Flex Layout, however, is its responsive engine. The Responsive API enables developers to easily specify different layouts, sizing, visibilities for different viewport sizes and display devices.

Flex-Layout 的響應式 API 確實非常強大，它的柵格不受限制，你可以使用 %、px 等任意單位設置響應式布局。使用 CSS 很難做到這一點，一般的 CSS 都是 12 或者 24 列柵格，無法隨意設置柵格的列數。而且想要實現一套基于 CSS 的響應式系統，編譯出來的代碼非常龐大，劃分的列數越細，編譯出來的體積就越大。而基于 JS 動態生成的響應式系統就不會有這種煩惱。如果項目中有自定義 DSL 的話，使用 Flex-Layout 編譯柵格會更加簡便。

說了這么多，其實 Flex-Layout 只是停止更新，v14 還是可以用的??，只是會提示依賴錯誤。不過 Ng-Matero 已經移除了 Flex-Layout，主要是示例項目中沒有必須依賴 Flex-Layout 的地方。Ng-Matero 早就有一套和 Flex-Layout 斷點相同的 grid class，只要將指令替換成 CSS class 就可以，使用方式和 Bootstrap 是一樣的。

使用 Flex-Layout 實現響應式柵格：

<div fxLayout="row wrap" fxLayoutGap="16px grid">
  <div fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-sm="25" fxFlex.gt-md="20"></div>
</div>

使用 grid class 實現響應式柵格：

<div class="row">
  <div class="col-sm-6 col-md-3 col-xl-2"></div>
</div>

總結

這篇文章是本年度的第一篇文章，也是最后一篇，說來真是慚愧。Ng-Matero 從第一版發布至今已有三年半的時間，總共發布了 8 個大版本，但是很多功能依然沒有時間和精力去完善。這幾年持續維護了多個開源項目，感覺很疲憊，但是已經當成了生活的一部分，后面還會一直不忘初心的堅持下去，特別感謝所有朋友的支持與鼓勵。