前言
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 中新增的幾個功能。
日期時間元件 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 個大版本，但是很多功能依然沒有時間和精力去完善。這幾年持續維護了多個開源專案，感覺很疲憊，但是已經當成了生活的一部分，後面還會一直不忘初心的堅持下去，特別感謝所有朋友的支援與鼓勵。