前端开发中，UI 组件库是必不可少的，比如 Ant Design 是国内知名的 UI 组件库之一。在基于 Angular 框架开发的项目中，@xlh/ng-zorro-antd 是 Ant Design 在 Angular 上的实现。它提供了全套的 Angular 组件，可以方便快捷地开发出漂亮的界面。本文将介绍如何使用 @xlh/ng-zorro-antd。
安装依赖
在使用 @xlh/ng-zorro-antd 之前，需要先安装它的依赖：
npm install @angular/cdk @angular/animations ng-zorro-antd --save
其中，@angular/cdk 和 @angular/animations 是 Angular 官方提供的依赖库，而 ng-zorro-antd 是 @xlh 团队开发的 Ant Design for Angular。
导入模块
安装依赖完成后，需要在 Angular 应用中导入相应的模块。在 app.module.ts 中导入 NgZorroAntdModule 和 BrowserAnimationsModule，代码如下：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ----------------------- - ---- ---------------------------------------
------ - ----------------- - ---- ----------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
------------------------
-----------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -使用组件
导入模块完成后，就可以使用 @xlh/ng-zorro-antd 提供的组件了。例如，在组件中使用 Button 组件，可以按照以下步骤进行：
- 在组件中导入 Button 组件和 NzButtonModule：
import { Component } from '@angular/core';
import { NzButtonModule } from 'ng-zorro-antd/button';
@Component({
selector: 'app-button',
template: '<button nz-button nzType="primary">Primary Button</button>'
})
export class ButtonComponent { }- 在模板中使用 Button 组件：
<app-button></app-button>
NzButtonModule 是 Button 组件所在的模块，需要先导入才能使用 Button 组件。通过 nz-button 属性设置 Button 的类型，可以设置以下类型：
- primary：主按钮
- dashed：虚线按钮
- danger：危险按钮
- default：默认按钮
- ghost：幽灵按钮
除了 Button 组件外，@xlh/ng-zorro-antd 还提供了很多其他组件，如 Icon、Layout、Table、Form 等，使用方式类似，可以参考官方文档使用。
小结
上面介绍了如何使用 @xlh/ng-zorro-antd，在开发 Angular 项目时可以使用它来快速开发漂亮的 UI 界面。使用过程中需要注意安装依赖和导入模块的顺序，同时要记住不同的组件需要导入不同的模块。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672593660cf7123b36388