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 在样式上做了很多细节优化，比如侧边栏的主题样式。
腾讯云开发者
