头图

Ng-Matero V10 正式发布!

nzbin

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 群。

image

阅读 375

ng-matero
ng-matero 开发交流、Angular、Angular Material 技术交流

琴棋书画均可,文史经哲具通。文艺青年,痴迷漫画。

233 声望
11 粉丝
0 条评论
你知道吗?

琴棋书画均可,文史经哲具通。文艺青年,痴迷漫画。

233 声望
11 粉丝
宣传栏