Library ng-zorro-antd Angular 企业级 UI 组件库

做 Angular 中后台项目的团队，大多想要 Ant Design 那种成熟、统一的视觉与交互体系，但官方 antd 只服务 React 技术栈。要么自己用 CSS 硬凑一套组件，要么在 Angular 里强行桥接 React 组件，维护成本和体验都很难看。
NG-ZORRO 把 Ant Design 的设计语言完整移植到了 Angular 上，提供 70 多个开箱即用的高质量组件。它不是简单的样式套壳，而是用 TypeScript 重写的、带类型约束、支持主题深度定制的组件库，让 Angular 开发者也能直接享受 Ant Design 生态。

项目基本信息

一、项目介绍

ng-zorro-antd（Angular UI Component Library based on Ant Design），Angular 企业级 UI 组件库。它把相关能力封装成开箱即用的形态，让开发者无需从零搭建即可直接落地，下文从优势、场景到安装使用逐一展开。

二、核心优势

• 70+ 高质量组件开箱即用，覆盖表单、表格、布局等企业级场景
• 纯 TypeScript 编写，静态类型可预测，配合 Angular Ivy 体验顺滑
• 支持 Zoneless 与 OnPush 模式，渲染性能有保障
• 主题可逐细节定制，并内置数十种语言的国际化支持

三、适用场景

• 中后台管理系统、数据看板、内部工具平台的前端搭建
• 需要统一设计语言、快速交付的 Angular 团队
• 已有 antd 设计稿、想平滑迁移到 Angular 的项目

四、安装教程

NG-ZORRO 通过 Angular CLI 的 schematic 一键接入，最简单的方式是在项目根目录执行：

ng add ng-zorro-antd

该命令会自动安装依赖、注入样式与国际化配置。如果想手动控制，也可以单独安装：

npm install ng-zorro-antd --save

常见报错：ng add 提示 Could not find Angular workspace。说明当前目录不是 Angular 项目根（缺少 angular.json），请先 ng new 创建工程再执行。另一个高频问题是 Angular 版本不匹配，NG-ZORRO 要求 Angular ^22.0.0，升级框架即可解决。

五、使用示例

在模块中引入需要的组件模块，即可在模板里使用：

import { NzButtonModule } from 'ng-zorro-antd/button';

@NgModule({ imports: [NzButtonModule] })
export class AppModule {}

模板里这样写：

<button nz-button nzType="primary">提交</button>
<nz-table [nzData]="list"></nz-table>

输入：引入 NzButtonModule、NzTableModule 并在组件中准备数据数组 list。
输出：页面渲染出 Ant Design 风格的蓝色主按钮与带分页的数据表格，无需手写任何 CSS。

六、常见问题

问：NG-ZORRO 和 React 的 antd 功能一致吗？

答：核心组件与设计语言一致，但实现和 API 是 Angular 风格（指令/模块），不能直接共用 React 代码。

问：能不能只按需引入部分组件？

答：可以。按上面的写法只 import 用到的模块即可，配合 Angular 的 tree-shaking 不会打包多余内容。

七、总结

NG-ZORRO 是 Angular 生态里最成熟的 Ant Design 实现，适合需要快速搭建统一风格中后台的团队。它用 TypeScript 重写、性能与类型体验都到位，是 Angular 项目接入企业级组件的首选。