Ng-Matero V10 正式发布！

image

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 表单模块的重要性以及目录结构的合理性。

image

在线示例：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 的所有样式。

image

在线示例：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 群。