ng-zorro-antd 作为 Ant Design 在 Angular 生态中的官方实现，长期服务于企业级中后台场景。这次 21.3.1 是一个 patch 版本，改动不大，但修的几个问题恰好是日常开发中容易踩到的坑——outlined 变体样式丢失、级联选择器滑动方向异常。如果你正在用这些组件，升级理由很直接。
outlined 变体样式类终于生效了
Ant Design 的设计体系里，组件有 filled、outlined、borderless 等多种视觉变体。ng-zorro-antd 也提供了对应的样式类，但此前 outlined 变体的样式类在某些组件上并没有正确应用——类名挂上了，CSS 规则却没匹配到，导致组件看起来和预期不一致。
这次 #9806 修复了这个问题。影响范围是全局的（commit 标记为 *），意味着不止一个组件受惠。如果你之前为了 workaround 手动补过 CSS，升级后可以移除那些临时样式了。
cascader / select / tree-select 滑动动画方向修正
9814 修复了 cascader、select、tree-select 三个组件的滑动动画方向问题。具体表现是：下拉面板展开或收起时，动画的位移方向与视觉预期相反——比如从下往上弹出时，面板却做了一个"向下滑入"的动画，看起来像闪了一下再跳到正确位置。
这类动画 bug 在功能上不影响使用，但对中后台产品的专业感有直接损害——用户会觉得界面"卡顿"或"闪烁"。修复后三个组件的展开收起动画方向与面板实际位置一致。
实践：升级与组件配置速查
升级方式很简单，一行命令搞定：
# 如果用 ng-add 方式管理
ng update ng-zorro-antd
# 或者直接改 package.json 后安装
npm install ng-zorro-antd@21.3.1
升级完成后，重点检查以下两类场景：
- 使用了 outlined 变体的组件——确认样式是否恢复正常，移除手动补的 CSS。
- cascader / select / tree-select 的下拉动画——确认展开收起方向是否自然。
下面是一个最小可运行的 Angular 组件示例，覆盖了这次修复涉及的三个组件和 outlined 变体用法，方便你直接粘贴验证：
// app.component.ts
import { Component } from '@angular/core';
import {
NzSelectModule,
NzCascaderModule,
NzTreeSelectModule
} from 'ng-zorro-antd';
@Component({
selector: 'app-root',
standalone: true,
imports: [NzSelectModule, NzCascaderModule, NzTreeSelectModule],
template: `
<div style="padding: 24px; display: flex; gap: 16px; flex-wrap: wrap;">
<!-- outlined 变体 select -->
<nz-select
nzVariant="outlined"
nzPlaceHolder="选择城市"
style="width: 200px;"
>
<nz-option nzValue="beijing" nzLabel="北京"></nz-option>
<nz-option nzValue="shanghai" nzLabel="上海"></nz-option>
<nz-option nzValue="guangzhou" nzLabel="广州"></nz-option>
</nz-select>
<!-- cascader：验证滑动动画方向 -->
<nz-cascader
[nzOptions]="cascaderOptions"
nzPlaceHolder="选择地区"
style="width: 200px;"
></nz-cascader>
<!-- tree-select：验证滑动动画方向 -->
<nz-tree-select
[nzNodes]="treeNodes"
nzPlaceHolder="选择部门"
nzShowSearch
style="width: 200px;"
></nz-tree-select>
</div>
`
})
export class AppComponent {
// cascader 数据
cascaderOptions = [
{
value: 'zhejiang',
label: '浙江',
children: [
{ value: 'hangzhou', label: '杭州', children: [{ value: 'xihu', label: '西湖' }] },
{ value: 'ningbo', label: '宁波' }
]
},
{
value: 'jiangsu',
label: '江苏',
children: [
{ value: 'nanjing', label: '南京', children: [{ value: 'zhonghuamen', label: '中华门' }] },
{ value: 'suzhou', label: '苏州' }
]
}
];
// tree-select 数据
treeNodes = [
{
title: '技术部',
key: 'tech',
children: [
{ title: '前端组', key: 'frontend', isLeaf: true },
{ title: '后端组', key: 'backend', isLeaf: true }
]
},
{
title: '产品部',
key: 'product',
children: [
{ title: '设计组', key: 'design', isLeaf: true },
{ title: '运营组', key: 'operation', isLeaf: true }
]
}
];
}
运行前确保项目已安装 ng-zorro-antd@21.3.1 且 Angular 版本与之兼容（ng-zorro-antd 21.x 对应 Angular 21.x）。如果你的项目还在 Angular 17/18，需要先升级 Angular 或使用对应版本的 ng-zorro-antd。
升级建议与注意事项
- patch 版本风险低：21.3.1 只包含 bug fix，没有 breaking change，从 21.3.0 升级无需改代码。
- 优先排查自定义样式覆盖：如果你之前为了修 outlined 样式或动画问题写过全局 CSS hack，升级后这些 hack 可能和修复后的原生样式冲突，建议逐个移除并验证。
- 关注后续版本：commit 信息显示还有其他 fix（摘要截断处标注了"4..."），完整 changelog 可在 GitHub releases 页面查看，确认是否有你用到的其他组件修复。
- 非 21.x 用户别直接跳版本：ng-zorro-antd 版本号与 Angular 主版本强绑定，跨大版本升级需要先完成 Angular 迁移。
一句话总结：如果你用了 outlined 变体或 cascader/select/tree-select 的下拉面板，这个 patch 值得立刻升级；其他场景升级也无害，但收益不明显，可以随常规维护节奏一起推进。