Ng-Matero V9 正式发布！

距离 Ng-Matero 第一版发布已经过去了半年多，该项目获得了越来越多的关注及喜爱，甚至得到了外国友人的赞助。借此项目也认识了很多对 Angular 和 Material 感兴趣的朋友，如今对项目的维护已经不单单是兴趣，更多的是一种责任。

Angular V9 已经在二月份重磅发布，拖沓了一个月，Ng-Matero V9 也终于发布！其中大部分时间耗在了 Material Extensions 的组件开发上。按照计划，Ng-Matero 直接从 0.x 过渡到到了 V9。虽然这是早已计划之内的事情，但是因为很多功能的欠缺，一直犹豫要不要直接发布 V9。最终还是激进了一把，先将版本号对齐，之后再慢慢迭代，毕竟 V9 对于 NG 来说也是一个关键的里程碑。

Ng-Matero: https://github.com/ng-matero/ng-matero
Material Extensions: https://github.com/ng-matero/extensions

再谈 Angular Material

我在之前的文章中狠狠的吹了一波 Angular Material 的设计之美，然而事实是 Angular Material 在设计及实现方面确实非常优秀，从可访问性、焦点管理、键盘交互、CDK 这些方面来看可以说一骑绝尘。

首先感叹一下，Bootstrap 的影响力实在在太大了，目前市面上 90% 的组件库都是以 Bootstrap 为蓝本，我也是 Bootstrap 的忠实粉丝。国内对 Bootstrap 的接受度明显高于 Material Design。其实 Material 和 Bootstrap 一样都可以作为基础库使用，通过修改样式进行风格定制。

唯一需要注意的是，Material Design 与 Bootstrap 最大的不同在于表单交互。Bootstrap 的表单元素相对比较独立，任何第三方表单类组件都可以直接使用。但是在 Angular Material 中就不能如此自由随意，比如在 Angular Material 的表单中使用 ng-select。虽然 ng-select 有 Material 的主题，但是直接使用的话，你会发现没办法展示错误信息。所有第三方表单组件都必须继承 form-field 类才能获得最佳交互体验。

我个人强烈建议将 Angular Material 作为基础库使用，样式方面可以根据喜好定制，实在无法接受 Material 的表单交互的话，也可以搭配 Bootstrap 亲自实现一个表单组件，或者直接引用其它组件库。

扩展组件库

实话说 Angular Material 确实缺少一些比较常用的交互组件，在开发 Ng-Matero 的过程中，顺便开发了一套 Material Extensions 的组件库。这套组件库的组件大致有以下三类：

• 完全独立开发的组件（e.g. alert）
• Angular Material 组件的二次封装（e.g. data-grid）
• 第三方组件的优化及包装（e.g. color-picker）

在开发扩展组件的时候，遇到了很多问题，简单说一下 color-picker 的设计。Material 官网并没有关于 color-picker 的介绍，所以具体用什么形式的交互实现完全由自己探索，最终设计成现在的样子。其中还有很多的技术细节，比如焦点事件处理、判断是否在 ShadowRoot 组件内、浏览器窗口的 blur 交互等。目前 color-picker 在使用方式上设计的并不好，后期将会重构。

关于扩展组件库的详细内容会写一篇专门的文章介绍。如果大家觉得 Material 还有欠缺的组件或者使用不习惯的地方，可以在 GitHub 提 issue。

最后，还是庆祝一下 Ng-Matero V9 的发布吧，如果你喜欢 Angular Material 或者对 Ng-Matero 感兴趣，欢迎与我交流！