10.0.0
NG-ZORRO 10.0.0
Welcome to the 10.0.0 release of ng-zorro-antd
, the latest version is built with Angular 10 and TypeScript 4, synchronized to Ant Design 4.6 style, which includes Bug Fixes(30+) Features(10+) and removes deprecated codes.
Highlights
Add Pipes experimental module
import { NzPipesModule } from 'ng-zorro-antd/pipes';
Including Aggregate, Ellipsis, SafeNull (null conversion) and more.
New Tabs component interaction
Synchronize Ant Design's interaction design, and deprecate the nzShowPagination
, nzOnNextClick
, and nzOnPrevClick
APIs.
Add week, month, year range pickers
Remove previously deprecated APIs
Remove primary entry and NgZorroAntdModule
.
Removal of most of the compatible code reduces both bundle size and execution efficiency and introduces more structural names for the Interfaces.
Migration Guide
1.Migration to secondary entry(if needed)
// Before
import { NzButtonModule, NzNoAnimationModule } from 'ng-zorro-antd';
// After
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';
We have already marked NgZorroAntdModule
and the primary entry as deprecated in v8. In this release, both of formers are removed completely. You are recommended to use NG-ZORRO TSLint to check/fix the import entry in your project.
(1) Install NG-ZORRO TSLint
$ npm i nz-tslint-rules -D
(2) Configuration tslint.json
{
"rulesDirectory": [
"node_modules/nz-tslint-rules"
],
"rules": {
"nz-secondary-entry-imports": true
}
}
(3) Run TSLint to check/fix your project
$ tslint --project <tsconfig> --fix
2.Upgrade dependencies
- Upgrade Angular to 9.x version, ref https://update.angular.io/ .
- Run
ng update @angular/cdk
, if you have used@angular/cdk
. - If you have used
date-fns@1.x
in your project, upgrade it to2.x
version, ref https://github.com/date-fns/date-fns-upgrade.
3.Upgrade NG-ZORRO
- Run
ng update ng-zorro-antd
. - If any warning messages appear in the console, follow the prompts to modify the corresponding code.
CHANGELOG
Bug Fixes
- tree: fix nzBlockNode not work (#5507) (5337652)
- breadcrumb: fix auto-generated with lazy modules (#5670) (932d92f), closes #5613 #5615
- carousel: support SSR (#5671) (65b44aa), closes #4292
- code-editor: init event never emit when using static loading (#5677) (b946742)
- date-picker: modify date-fns week-year format (#5753) (4911e36), closes #5327
- date-picker: nzCalendarChange not work when clicking ok (#5790) (c9426f0), closes #5782
- date-picker: open the panel wrongly in IE11 (#5643) (0649ceb), closes #5562
- date-picker: window is not defined (#5640) (f5899ad), closes #5630
- form: optimize code to increase robustness (#5550) (fdf085b)
- mention: not emit nzOnSearchChange when value is empty (#5729) (4cc14ba), closes #5722
- modal: change back to FocusTrapFactory (#5596) (9805620), closes #5591
- progress: fix value not updated when is steps (#5676) (3eecc44), closes #5585
- select: arrow icon can be used when not using single-select (#5785) (bb8677c), closes #5575
- select: cursor abnormal in nz-select with nzDisabled (#5716) (0d1f027), closes #5709
- select: display IME input completely (#5657) (111721a)
- select: fix click arrow open (#5784) (2d3a49c)
- slider: fix reverse slider value with min and max (#5814) (fa46a79)
- style: fix 4.6.1 sync style (#5727) (b5f96ca)
- table: fix scroll bar displays always even unnecessary (#5794) (71be33a), closes #5405
- tabs: fix clickable area of tab-link (#5708) (57962e1), closes #5696
- tabs: fix dropdown style (#5659) (8415a70)
- tabs: not emit click event from dropdown menu (#5639) (201ef52)
- tabs: router link content projection error (#5663) (47050b0)
- tabs: tab-link cannot be disabled (#5759) (1afabd4), closes #5549 #5543
- time-picker: input value change not work (#5770) (31ca2da), closes #5678 #5741 #4934
- tooltip: enable
cdkConnectedOverlayPush
(#5542) (55ec1cd), closes #1825 - tree-select: not clear search value when dropdown close (#5761) (602ea93), closes #5664
- tree-select: should be not clearable when disabled or unselected (#5769) (baede4a), closes #5603
Code Refactoring
- anchor: remove deprecated APIs for v10 (#5776) (e50d530)
- cascader: remove deprecated APIs for v10 (#5778) (7e64e4c)
- code-editor: remove deprecated APIs for v10 (#5798) (353e657)
- date-picker: remove deprecated APIs for v10 (#5793) (5159900)
- form,grid: remove deprecated APIs for v10 (#5788) (b215efa)
- notification: remove deprecated APIs for v10 (#5779) (e5ed4d2)
- table: remove deprecated APIs for v10 (#5792) (132e425)
- tooltip, popover, popconfirm: change deprecated APIs for v10 (#5817) (dc3088c)
- tree: remove deprecated APIs for v10 (#5789) (b378cb7)
- upload: remove deprecated APIs for v10 (#5774) (9f5baae)
Features
- modal: support params and modelRef when footer is template (#5551) (07d91a1), closes #5506
- breadcrumb: add
nzRouteLabelFn
property (#5523) (#5545) (81ef791) - button: support text type (3f5d10b)
- card: support nzBorderless (#5796) (6e4419c)
- collapse: support nzGhost property (1a408ee)
- date-picker: add
open
andclose
methods (#5777) (be6eda4), closes #3352 #5771 - date-picker: add week month year range (#5832) (0725d88), closes #5742
- divider: support nzPlain property (d5232ac)
- drawer: add
nzFooter
property (#4618) (#5553) (2cd9e12) - drawer: support
[nzCloseIcon]
(#5546) (aa984f7) - input: support borderless (#5781) (6e7877b)
- pipes: add pipes (#4812) (e03e65b)
- skeleton: add nzRound prop and skeleton-element image (#5710) (aa2ea54)
- space: support
nzAlign
(#5299) (2febb92) - table: support nzOuterBordered (#5795) (471b0bf)
- tabs: support (nzContextmenu) event (#5749) (76931ac), closes #5712
- tag: support icon in tag (#5801) (b909354), closes #5628 #4581
- tree-select: support virtual scroll (#5760) (1f2d816), closes #5589
- typography: support keyboard and link types (#5355) (2d6fa62)
BREAKING CHANGES
tooltip, popover, popconfirm:
- nz-tooltip
[nzOverlayStyle]
has been removed, use[nzTooltipOverlayStyle]
instead.[nzOverlayClassName]
has been removed, use[nzTooltipOverlayClassName]
instead.[nzMouseLeaveDelay]
has been removed, use[nzTooltipMouseLeaveDelay]
instead.[nzMouseEnterDelay]
has been removed, use[nzTooltipMouseEnterDelay]
instead.(nzVisibleChange)
has been removed, use(nzTooltipVisibleChange)
instead.
- nz-popover
[nzOverlayStyle]
has been removed, use[nzPopoverOverlayStyle]
instead.[nzOverlayClassName]
has been removed, use[nzPopoverOverlayClassName]
instead.[nzMouseLeaveDelay]
has been removed, use[nzPopoverMouseLeaveDelay]
instead.[nzMouseEnterDelay]
has been removed, use[nzPopoverMouseEnterDelay]
instead.(nzVisibleChange)
has been removed, use(nzPopoverVisibleChange)
instead.
- nz-popconfirm
[nzOverlayStyle]
has been removed, use[nzPopconfirmOverlayStyle]
instead.[nzOverlayClassName]
has been removed, use[nzPopconfirmOverlayClassName]
instead.[nzMouseLeaveDelay]
has been removed, use[nzPopconfirmMouseLeaveDelay]
instead.[nzMouseEnterDelay]
has been removed, use[nzPopconfirmMouseEnterDelay]
instead.(nzVisibleChange)
has been removed, use(nzPopconfirmVisibleChange)
instead.
code-editor:
NzCodeEditorService.updateDefaultOption
has been removed, useNzConfigService.set
instead.- Inject token
NZ_CODE_EDITOR_CONFIG
has been removed, useNZ_CONFIG
instead.
date-picker:
NZ_DATE_FNS_COMPATIBLE
has been removed. Please migrate to date-fns v2 manually.- nz-date-picker,nz-week-picker,nz-month-picker,nz-year-picker,nz-range-picker
[nzClassName]
has been removed, usengClass
instead.[nzStyle]
has been removed, usengStyle
instead.
table:
th[nzSort]
has been removed, useth[nzSortOrder]
instead.th(nzSortChange) has been removed, use
th(nzSortOrderChange)` instead.th(nzSortChangeWithKey)
has been removed. Please manually remove it.thead(nzSortChange)
has been removed, usethead(nzSortOrderChange)
instead.thead[nzSingleSort]
andth[nzSortKey]
has been removed. Please manually change toth[nzSortFn]
.
form,grid:
nz-form-item[nzFlex]
has been removed. Please manually remove this input.nz-form-item[nzType]
has been removed. Please manually remove this input.nz-row[nzType]
has been removed. Please manually remove this input.
tree:
NzTreeNode.isAllChecked
has been removed, useNzTreeNode.isChecked
instead.NzTreeNode.setSelected(boolean)
has been removed, useNzTreeNode.isSelected = boolean
instead.
notification:
NzNotificationDataFilled
has been removed, useNzNotificationRef
instead.NzNotificationDataOptions.nzPosition
has been removed, useNzNotificationDataOptions.nzPlacement
instead.
anchor:
nzTarget
has been removed, usenzContainer
instead.
cascader:
CascaderOption
has been removed, useNzCascaderOption
instead.CascaderSearchOption
has been removed, useNzCascaderSearchOption
instead.
upload:
UploadType
has been removed, useNzUploadType
instead.UploadListType
has been removed, useNzUploadListType
instead.UploadFile
has been removed, useNzUploadFile
instead.UploadChangeParam
has been removed, useNzUploadChangeParam
instead.ShowUploadListInterface
has been removed, useNzShowUploadList
instead.UploadTransformFileType
has been removed, useNzUploadTransformFileType
instead.UploadXHRArgs
has been removed, useNzUploadXHRArgs
instead.
版本介绍
欢迎来到 ng-zorro-antd 的 10.0.0 版本,最新版本使用 Angular 10 和 TypeScript 4 构建,同步到了 Ant Design 4.6 样式。包含 Bug Fixes(30+) Features(10+) 并移除了之前版本的弃用代码,更多 Features 将会在 10.x 后续版本释出。
添加了 Pipes 试验性模块
import { NzPipesModule } from 'ng-zorro-antd/pipes';
包含 Aggregate(聚合)、Ellipsis(字符省略)、SafeNull(null 转换) 等常用 Pipe。
新的 Tabs 组件交互
同步了 Ant Design 的交互设计,弃用了 nzShowPagination 、 nzOnNextClick 、nzOnPrevClick API。
新增 Week, Month, Year 范围选择器
移除了之前弃用的 API
移除了一级入口及 NgZorroAntdModule,提高编译速度;移除了许多兼容代码减少了包体积和执行效率以及更好的 Interface 命名。
升级指南
1.迁移到二级入口(如果需要)
// 之前
import { NzButtonModule, NzNoAnimationModule } from 'ng-zorro-antd';
// 之后
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';
我们已经在 v8 中弃用了 NgZorroAntdModule
和一级入口,并保留了 2 个版本后在此版本中移除,你可以使用 NG-ZORRO TSLint 来检查/修复项目中的引入入口。
(1) 安装 NG-ZORRO TSLint
$ npm i nz-tslint-rules -D
(2) 配置 tslint.json
{
"rulesDirectory": [
"node_modules/nz-tslint-rules"
],
"rules": {
"nz-secondary-entry-imports": true
}
}
(3) 运行 TSLint 检查项目中的一级入口并修复
$ tslint --project <tsconfig> --fix
2. 升级相关依赖
- 前往 https://update.angular.io/ 将项目升级到 Angular10。
- 如果你有单独使用
@angular/cdk
请执行ng update @angular/cdk
- 如果你有单独使用
date-fns@1.x
请先升级到2.x
3.升级 NG-ZORRO
- 运行
ng update ng-zorro-antd
- 如果控制台出现警告消息请按提示修改对应代码
CHANGELOG
Bug Fixes
- tree: 修复
nzBlockNode
不生效的问题 (#5507) (5337652) - breadcrumb: 修复懒加载时
nzAutoGenerate
的问题 (#5670) (932d92f), closes #5613 #5615 - carousel: 修复 SSR (#5671) (65b44aa), closes #4292
- code-editor: 修复懒加载时初始化事件不生效的代替 (#5677) (b946742)
- date-picker: 修复 week-year 格式化的问题 (#5753) (4911e36), closes #5327
- date-picker: 修复点击 ok 时
nzCalendarChange
不生效的问题 (#5790) (c9426f0), closes #5782 - date-picker: 修复 IE11 下自动打开的问题 (#5643) (0649ceb), closes #5562
- date-picker: 修复 SSR (#5640) (f5899ad), closes #5630
- form: 提高鲁棒性 (#5550) (fdf085b)
- mention: 修复上一个值为空时
nzOnSearchChange
不生效的问题 (#5729) (4cc14ba), closes #5722 - modal: 回退到 FocusTrapFactory (#5596) (9805620), closes #5591
- progress: 修复动态修改
nzSteps
的问题 (#5676) (3eecc44), closes #5585 - select: 修复单选模式下箭头图标的问题 (#5785) (bb8677c), closes #5575
- select: 修复禁用时的光标异常 (#5716) (0d1f027), closes #5709
- select: 输入框禁用
COMPOSITION_BUFFER_MODE
策略 (#5657) (111721a) - select: 修复点击箭头无法打开的问题 (#5784) (2d3a49c)
- slider: 修复反转模式下最大值最小值的问题 (#5814) (fa46a79)
- style: 修复 antd 4.6.1 的样式同步 (#5727) (b5f96ca)
- table: 修复滚动条终是显示的问题 (#5794) (71be33a), closes #5405
- tabs: 修复 tab-link 的点击区域 (#5708) (57962e1), closes #5696
- tabs: 修复下拉列表样式 (#5659) (8415a70)
- tabs: 修复点击下拉列表时没有发出事件 (#5639) (201ef52)
- tabs: 修复 tab-link 内容投影的问题 (#5663) (47050b0)
- tabs: 修复 tab-link 无法禁用的问题 (#5759) (1afabd4), closes #5549 #5543
- time-picker: 修改修改 input 值不生效的问题 (#5770) (31ca2da), closes #5678 #5741 #4934
- tooltip: 启用
cdkConnectedOverlayPush
(#5542) (55ec1cd), closes #1825 - tree-select: 修复关闭下拉时搜索值没有清空的问题 (#5761) (602ea93), closes #5664
- tree-select: 禁用或未选择时不应该显示清除按钮 (#5769) (baede4a), closes #5603
Code Refactoring
- anchor: 删除 v10 下的弃用 API (#5776) (e50d530)
- cascader: 删除 v10 下的弃用 API (#5778) (7e64e4c)
- code-editor: 删除 v10 下的弃用 API (#5798) (353e657)
- date-picker: 删除 v10 下的弃用 API (#5793) (5159900)
- form,grid: 删除 v10 下的弃用 API (#5788) (b215efa)
- notification: 删除 v10 下的弃用 API (#5779) (e5ed4d2)
- table: 删除 v10 下的弃用 API (#5792) (132e425)
- tooltip, popover, popconfirm: 删除 v10 下的弃用 API (#5817) (dc3088c)
- tree: 删除 v10 下的弃用 API (#5789) (b378cb7)
- upload: 删除 v10 下的弃用 API (#5774) (9f5baae)
Features
- modal:
nzFooter
添加模版引用变量支持 (#5551) (07d91a1), closes #5506 - breadcrumb: 支持
nzRouteLabelFn
属性 (#5523) (#5545) (81ef791) - button: 支持
text
类型 (3f5d10b) - card: 支持
nzBorderless
属性 (#5796) (6e4419c) - collapse: 支持
nzGhost
属性 (1a408ee) - date-picker: 支持
open
和close
方法 (#5777) (be6eda4), closes #3352 #5771 - date-picker: 新增 week, month, year 范围选择器 (#5832) (0725d88), closes #5742
- divider: 支持
nzPlain
属性 (d5232ac) - drawer: 支持
nzFooter
属性 (#4618) (#5553) (2cd9e12) - drawer: 支持
[nzCloseIcon]
属性 (#5546) (aa984f7) - input: 支持
nzBorderless
属性 (#5781) (6e7877b) - pipes: 新增 Pipes 模块 (#4812) (e03e65b)
- skeleton: 新增图片类型和支持
nzRound
属性 (#5710) (aa2ea54) - space: 支持
nzAlign
属性 (#5299) (2febb92) - table: 支持
nzOuterBordered
属性 (#5795) (471b0bf) - tabs: 支持
(nzContextmenu)
事件 (#5749) (76931ac), closes #5712 - tag: 支持 icon (#5801) (b909354), closes #5628 #4581
- tree-select: 支持虚拟滚动 (#5760) (1f2d816), closes #5589
- typography: 支持
keyboard
和link
类型 (#5355) (2d6fa62)
BREAKING CHANGES
tooltip, popover, popconfirm:
- nz-tooltip
[nzOverlayStyle]
已经移除, 请使用[nzTooltipOverlayStyle]
代替。[nzOverlayClassName]
已经移除, 请使用[nzTooltipOverlayClassName]
代替。[nzMouseLeaveDelay]
已经移除, 请使用[nzTooltipMouseLeaveDelay]
代替。[nzMouseEnterDelay]
已经移除, 请使用[nzTooltipMouseEnterDelay]
代替。(nzVisibleChange)
已经移除, 请使用(nzTooltipVisibleChange)
代替。
- nz-popover
[nzOverlayStyle]
已经移除, 请使用[nzPopoverOverlayStyle]
代替。[nzOverlayClassName]
已经移除, 请使用[nzPopoverOverlayClassName]
代替。[nzMouseLeaveDelay]
已经移除, 请使用[nzPopoverMouseLeaveDelay]
代替。[nzMouseEnterDelay]
已经移除, 请使用[nzPopoverMouseEnterDelay]
代替。(nzVisibleChange)
已经移除, 请使用(nzPopoverVisibleChange)
代替。
- nz-popconfirm
[nzOverlayStyle]
已经移除, 请使用[nzPopconfirmOverlayStyle]
代替。[nzOverlayClassName]
已经移除, 请使用[nzPopconfirmOverlayClassName]
代替。[nzMouseLeaveDelay]
已经移除, 请使用[nzPopconfirmMouseLeaveDelay]
代替。[nzMouseEnterDelay]
已经移除, 请使用[nzPopconfirmMouseEnterDelay]
代替。(nzVisibleChange)
已经移除, 请使用(nzPopconfirmVisibleChange)
代替。
code-editor:
NzCodeEditorService.updateDefaultOption
已经移除, 请使用NzConfigService.set
代替。- Inject token
NZ_CODE_EDITOR_CONFIG
已经移除, 请使用NZ_CONFIG
代替。
date-picker:
NZ_DATE_FNS_COMPATIBLE
已经移除. 请手动迁移到 date-fns v2。- nz-date-picker,nz-week-picker,nz-month-picker,nz-year-picker,nz-range-picker
[nzClassName]
已经移除, 请使用ngClass
代替。[nzStyle]
已经移除, 请使用ngStyle
代替。
table:
th[nzSort]
已经移除, 请使用th[nzSortOrder]
代替。th(nzSortChange) 已经移除, 请使用
th(nzSortOrderChange)` 代替。th(nzSortChangeWithKey)
已经移除, 请手动移除。thead(nzSortChange)
已经移除, 请使用thead(nzSortOrderChange)
代替。thead[nzSingleSort]
和th[nzSortKey]
已经移除, 请手动修改为th[nzSortFn]
。
form,grid:
nz-form-item[nzFlex]
已经移除, 请手动移除。nz-form-item[nzType]
已经移除, 请手动移除。nz-row[nzType]
已经移除, 请手动移除。
tree:
NzTreeNode.isAllChecked
已经移除, 请使用NzTreeNode.isChecked
代替。NzTreeNode.setSelected(boolean)
已经移除, 请使用NzTreeNode.isSelected = boolean
代替。
notification:
NzNotificationDataFilled
已经移除, 请使用NzNotificationRef
代替。NzNotificationDataOptions.nzPosition
已经移除, 请使用NzNotificationDataOptions.nzPlacement
代替。
anchor:
nzTarget
已经移除, 请使用nzContainer
代替。
cascader:
CascaderOption
已经移除, 请使用NzCascaderOption
代替。CascaderSearchOption
已经移除, 请使用NzCascaderSearchOption
代替。
upload:
UploadType
已经移除, 请使用NzUploadType
代替。UploadListType
已经移除, 请使用NzUploadListType
代替。UploadFile
已经移除, 请使用NzUploadFile
代替。UploadChangeParam
已经移除, 请使用NzUploadChangeParam
代替。ShowUploadListInterface
已经移除, 请使用NzShowUploadList
代替。UploadTransformFileType
已经移除, 请使用NzUploadTransformFileType
代替。UploadXHRArgs
已经移除, 请使用NzUploadXHRArgs
代替。