您现在的位置是:首页 > 文章详情

ng-zorro-antd 9.0 发布 ,支持 Angular 9 新特性!

日期:2020-04-16点击:655

版本介绍

欢迎来到 ng-zorro-antd 的 9.0.0 版本,升级到最新版本之后,开发者不仅可以享受到最新版本 Angular 的支持,还可以获得最新特性和更好的性能。

ng-zorro-antd 的部分 API 在 8.x 版本进入弃用状态,并且在开发环境中给出了警告提醒,所有之前弃用 API 在 9.0.0 不再支持,如果你之前已经根据告警信息修改了对应组件的使用方式,那么 9.0.0 版本升级不会有任何障碍,请按照以下步骤进行。

开始升级之前

  1. 首先确保你 Node.js >= 10.13
  2. 创建新的分支,或者使用其他方式备份当前项目
  3. 删除项目下 package-lock.json 文件

升级相关依赖

  • 升级 Angular 主版本号至 9.0.0 版本,可以参考 https://update.angular.io/
  • 如果你有单独使用 @angular/cdk 请执行 ng update @angular/cdk
  • 如果你有单独使用 date-fns 请先升级到 2.x升级指南
  • 如果你有使用 monaco-editor 请先升级到 0.2.x, 使用 monaco-editor-webpack-plugin 时请将其升级到 1.9.x

升级 NG-ZORRO

  • 运行 ng update ng-zorro-antd
  • 如果控制台出现警告消息请按提示修改对应代码

date-fns 升级指南

当你切换至 date-fns 时,一些日期格式会有 breaking change。比如:

 <!-- datefns v1 --> <nz-date-picker nzFormat="YYYY-MM-DD"></nz-date-picker> <!-- datefns v2 --> <nz-date-picker nzFormat="yyyy-MM-dd"></nz-date-picker>

我们推荐使用 date-fns v2 的日期格式。如果你不想使用新日期格式,你可以用 NZ_DATE_FNS_COMPATIBLE ,当设置为 true 时,ng-zorro-antd 会把 v1 的格式转为 v2,新旧格式的对比看这里

 providers: [ { provide: NZ_DATE_FNS_COMPATIBLE, useValue: true } ]

但 NZ_DATE_FNS_COMPATIBLE 不会保留太久,到 ng-zorro-antd v10 将会移除对 date-fns v1 日期格式的支持,希望你能及时更新 date-fns 日期格式。关于 date-fns 升级指南看这里,如果业务中使用了 date-fns,可以参考 date-fns 官方兼容工具 查看。

新版本特性

支持 Angular Ivy

我们已经将 @angular/* 和 @angular/cdk 版本升级到 v9,现在你可以使用 Ivy 渲染引擎运行你的项目,并且开启 strictTemplates 选项使用更严格的的模版类型检查。

获取更多帮助请前往 Angular Ivy 和 Template type 查看。

Ant Design 4 设计规范

我们已经同步了 Ant Design 4 设计规范,并且添加了暗黑(Dark)和紧凑(Compact) 主题支持。

性能和易用性增强

  • 在之前的版本中 Table 组件已经集成了虚拟滚动,现在 Select 和 Tree 也同样支持;
  • Form 和 Table 简化了使用方式,现在可以编写更少的模版和配置;
  • 允许在子模块中添加图标,以减少首屏加载时间;
  • 现在当路由改变时弹出菜单将自动关闭,同时为 Modal 等组件添加了对应选项;

Features

Bug Fixes

Performance Improvements

  • checkbox: 使用 css empty selector 代替了 observeContent (#4761) (da8821a)
  • input: 提升 input 性能 (7af643b), closes #3950*
  • radio: 重构了数据流 (#4770) (423a382)*

BREAKING CHANGES

注意: 所有不兼容改动均在 8.x 最新版本中给出了 warning,如果你在 8.x 最新版本中修复了所有 warning,9.x 可以直接升级的。

  • calendar:
    • <nz-calendar> nzCard 被移除了, 请使用 nzFullscreen 代替。
  • carousel:
    • nzVertical 被移除,请使用 'nzDotPosition' 代替。
  • empty:
    • NZ_DEFAULT_EMPTY_CONTENT 被移除,请使用 NzConfigService 代替。
  • form:
    • nz-form-extra 被移除,请使用 nz-form-control 中的 nzExtra 代替。
    • nz-form-explain 被移除,请使用 nz-form-control 中的 nzSuccessTip | nzWarningTip | nzErrorTip | nzValidatingTip 代替。
  • icon:
    • i[nz-icon]twoToneColor theme spin iconfont type 输入被移除, 请使用 nzTwoToneColor nzTheme nzSpin nzIconfont nzType 代替。
    • i.anticon 被移除, 请使用 i[nz-icon] 代替。
    • NZ_ICON_DEFAULT_TWOTONE_COLOR 被移除, 请使用 NzConfigService
  • input-number:
    • ngModelChange 会在用户输入时立刻触发
  • message,notification:
    • NZ_MESSAGE_CONFIG 被移除,请使用 NzConfigService 代替。
    • NZ_NOTIFICATION_CONFIG 被移除,请使用 NzConfigService 代替。
    • config method of NzMessageService and NzNotificationService 被移除,请使用 set method of NzConfigService 代替。
    • 用 NzMessageRef 替换 NzMessageDataFilled
    • 用 NzNotificationRef 替换 NzNotificationDataFilled
  • pagination:
    • 当定制 nzItemRender 时,需要考虑 prev_5 and next_5
    • 'pre' 被修改为 'prev'
  • tree, tree-select:
    • 移除了 [nzDefaultExpandAll] 请使用 [nzExpandAll] 代替。
    • 移除了 [nzDefaultExpandedKeys] 请使用 [nzExpandedKeys] 代替。
    • 移除了 [nzDefaultSelectedKeys] 请使用 [nzSelectedKeys] 代替。
    • 移除了 [nzDefaultCheckedKeys] 请使用 [nzCheckedKeys] 代替。
    • 移除了 (nzOnSearchNode) 请使用 (nzSearchValueChange) 代替。
  • tooltip,popover,popconfirm:
    • <nz-tooltip> <nz-popover> <nz-popconfirm> 组件被移除, 请使用对应的 directives 代替。
  • 移除 API: NgZorroAntdModule.forRoot()
原文链接:https://www.oschina.net/news/114935/ng-gorro-antd-9-0-released
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章