乐趣区

关于javascript:NgMatero-V10-正式发布

jiezi

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

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

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

退出移动版