关于angular:NgMatero-v15-正式发布

前言

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/…

日期工夫组件 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 个大版本，然而很多性能仍然没有工夫和精力去欠缺。这几年继续保护了多个开源我的项目，感觉很疲乏，然而曾经当成了生存的一部分，前面还会始终不忘初心的坚持下去，特别感谢所有敌人的反对与激励。