头图

Ng-Matero V10 正式发布!

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


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

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

243 声望
13 粉丝
0 条评论
推荐阅读
Ng-Matero v15 正式发布
Angular 按照既定的发版计划在 11 月中旬发布了 v15 版本。推迟了一个月(几乎每个版本都是这个节奏😳),Ng-Matero 也终于更新到了 v15。其实 Ng-Matero 本身的更新非常简单,但是同步维护的 Material Extensions...

nzbin阅读 495

封面图
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木140阅读 11.9k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 5.9k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.1k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7k评论 6

【关于Javascript】--- 正则表达式篇
基础知识一、元字符 {代码...} 二、量词 {代码...} 三、集合 字符类 {代码...} 四、分支 {代码...} 五、边界 开始结束 {代码...} 六、修饰符 {代码...} 七、贪婪模式和非贪婪模式js默认贪婪模式即最大可能的匹配...

Jerry35阅读 2.9k

从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木32阅读 6k评论 9

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

243 声望
13 粉丝
宣传栏