版本介绍

欢迎来到 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

• breadcrumb: 支持独立 separator (#4713) (1f490e9)
• collapse: 支持 nzExpandIconPosition (#4781) ([760512a](760* 512a))
• grid: 支持 nzFlex 与 nzGutter 数组输入 (c4d2694)*
• icon: 支持在 feature module 中导入 icons (#4711) (* 0bcd2a9)
• input: 支持 textarea 带 clear 图标的效果 (0af9242), closes [#4623](https://github.com/NG-ZORRO/ng-zorro-antd/issues/* 4623)
• page-header: 增加 nzGhost 选项 (#4306) (4c78cca), closes #43* 03
• select: select 支持 virutal scroll 模式 (40daee9), closes #4585 [#3497](https://github.com/NG-ZORRO/ng-zorro-antd/issues/* 3497)
• skeleton: 增加 nz-skeleton-element (#4859) (8dc2ff3)*
• space: 添加新组件 (#4928) (df01bd1), closes [#4913](h* ttps://github.com//issues/4913)
• table: 支持 nzQueryParams (#4970) (79ea999)*
• tabs: 增加了 nzCanDeactivate 钩子 (#4476) ([a533980](a533* 980)), closes #4432
• tag: 增加 status colors 选项 (#4628) (aa22c0f), closes #4622 #44* 13
• tree: 支持虚拟滚动 (#4979) (6803a92), closes #4426 #3808 [#3436](ht* tps://github.com//issues/3436) #2680 #1771
• tree-select: 支持 nzDropdownClassName 选项 (#4552) (df8c125), closes #4508*
• typography: 支持 nzSuffix 选项 (#4629) (ca02a07), closes #4620*
• form:支持自动错误提示 (#4888) (0b85483), closes #4523当 FormControl.status 为 INVALID 并且错误包含 {warning：true} 时，nz-form-control 显示警告状态。(#4891)(b187* 3da) , close #4525
• code-editor:支持静态导入 (#4341) (29f732b)更新到 monaco@0.20.0 的类型 (#4984) (3963ad1)
• date-picker:支持更多的 inputs (#4843) (af4051e)支持对 input 数据的解析 (#4833) (6a523ba), closes #4028 #3976 #2492 #4101
• i18n:支持 Armenian 语言 (#4611) (038691f)支持 Georgian 语言 (#4491) (d96ebe0)
• input-number:支持 nzPrecisionMode 模式 (#4185) (bfe089f), closes #4173支持 ngModelChange 在输入时立即触发 (#4769) (299ba6d), closes #3039 #3773
• menu:当 sider 收起时，自动触发 nzInlineCollapsed模式 (51fbf5e), closes #4680支持 nzMatchRouter 与 CanDeactivate 配合工作 (7560563), closes #4407
• notification:添加 onClick 可观察对象 (#4989) (9224240), closes #4986支持 close icon 选项 (#4495) (80a0b26), closes #4494
• pagination:nzItemRender 支持 prev_5 与 next_5 图标定制 (#4754) (41c4860)支持响应式 size (#4863) (1bb01b5)
• progress:支持 steps 模式 (#4637) (fe8b469), closes #4635支持 nzFormat 传入 TemplateRef (#4598) (edf0e9c), closes #4596
• tooltip:支持改变 trigger 位置 (#4397) (48d7122), closes #4365tooltip,etc 支持自定义源元素 (#4849) (863fd4b)

Bug Fixes

• mention: 修复移动端选择问题 (#4309) (1be6d51), closes #4281
• menu: 修复在屏幕越界时的显示问题 (4c8032b), closes #3412 #4227 #3687
• message: 修复 prod 下 message 与 notification 的问题 (#4884) (3e2f85d)*
• page-header: 修复 location 注入问题 (#5013) (9073fa5), closes #4945*
• pagination: 修复半角字符问题 (#4371) (cc3868e)*
• transfer: 修复 nzTargetKeys 无效问题 (#4670) ([31089a1](3* 1089a1)), closes #4641 #4360 #4210
• empty: 修复 Empty 在 dark 模式下的显示问题 (#4924) (bae59d7), closes #4921*
• grid: 修复响应式的问题 (#4906) (d6828ed)*
• list: 修复头像部分的兼容 API (#4952) ([d8a2594](d8a* 2594)), closes #4912
• badge: 允许将 nzTitle 设置为 null (#4965) (a35fb5e), closes [#4776](https://github.com/NG-ZORRO/ng-zorro-antd/is* sues/4776)
• breadcrumb: 修复面包屑显示问题 (#4880) (2553328)*
• button: 修复 transition 显示问题 (9e0df2a), closes [#2697](https://github.com/NG-ZORRO/ng-zorro-antd/iss* ues/2697)
• cascader: 修复无选项时的显示问题 (#4565) (9d8d7e6), closes* #4562
• slider: 修复垂直模式下拖拽句柄样式问题 (#4939) (6fba78d)*
• timeline: 修复 reverse 下的展示问题 (#4690) (09bf8f4),* closes #4509
• auto-complete:修复滚动条拖拽时自动关闭问题 (#4551) (387ebc1), closes #4333修复默认值显示问题 (#4366) (09f1ec6), closes #4362
• code-editor:修复配置选项 (#4436) (5283a32)修复 diff 模式下的问题 (#4485) (#4532) (021cf22)
• date-picker:修复 nzDefaultOpenValue 无效问题 (#4357) (dfa3d39), closes #4331修复点击日期切换面板时 年/月 选择器不同步切换的问题 (#4876) (3aebe7c), closes #3499修复展开动画效果 (#4315) (931fd48)
• drawer:修复 overflow 样式问题 (#4423) (9451de5), closes #4354修复位置变化时的动画问题 (#4609) (e539096), closes #4224修复 header 结构样式问题 (#4311) (5cdd5db), closes #4304
• dropdown:修复 contextmenu 多重打开问题 (39487f1), closes #3971 #4684修复 menu group 在 dropdown 样式问题你 (d928a8c), closes #4505
• layout:修复 layout 高度问题 (bed60ff), closes #4676修复 responsive 无效问题 (9f951f8)
• modal:修复在初始化为打开状态时 nzModalFooter 指令不生效的问题 (#4954) (2f400e8), closes #4948修复关闭按钮样式 (#5014) (174099e)修复 nzMaskClosable 在 confirm 模式下不工作的问题 (#4347) (475bbc4), closes #4344
• select:修复 hidden 的选项可以被选中的问题 (#4382) (cf22133), closes #4377 #4377修复空状态的问题 (#4907) (f295c10)
• table:修复 nzFilters 为 null 时的报错 (#4595) (2c26e9f)修复 Table 导出的 data 数据类型问题 (#4608) (70b1440), closes #4593修复 Table nzWidth 的问题 (#4329) (c6bdf15), closes #4312修复 antd@4.1.0 样式问题 (#4953) (44f606c)修复无数据时的问题 (#4947) (7f7989e)修复 nzTotal 在非前端分页时的问题 (#4922) (9ddc060), closes #4919
• time-picker:修复输入ISO字符串的问题 (#4949) (3b45a22), closes #4775 #4777 #4871 #1679修复 ngModelChange 失效的问题 (#4944) (a6ecdb9)修复在 datepicker 滚动错误的问题 (#4961) (cdf387f)
• tooltip:修复 hover popover 时时隐藏的问题 (#4418) (a6b5901), closes #4417修复 undefined 不生效的问题 (#4392) (2a71c43)修复 tooltip 销毁时报错的问题 (#4387) (8e9e6a9), closes #3875 #4317 #4386
• tree:修复输入区分大小写的问题 (#4766) (828b13e), closes #1996 #4765修复动画 (#4973) (70b2fc3)
• tree-select:修复点击 label 在 strict 模式下的问题 (#4424) (7a11124), closes #4422修复 tags 在 strict 模式下的问题 (#4368) (a6547a0), closes #4364

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()