前言：
在之前的一篇文章已經介紹過了，公司正在使用NG-ZORRO組件庫開發后台應用，並且詳細的介紹了Angular開發環境的搭建和項目的創建。這篇文章就是為了讓大家熟悉了解我們該如何在Angular項目中使用到NG-ZORRO UI組件庫搭建后台管理框架。
NG-ZORRO介紹：
官網地址：https://ng.ant.design/docs/introduce/zh
ng-zorro-antd是遵循 Ant Design 設計規范的 Angular UI 組件庫，主要用於研發企業級中后台產品。全部代碼開源並遵循 MIT 協議，任何企業、組織及個人均可免費使用。
NG-ZORRO特性：
- 提煉自企業級中后台產品的交互語言和視覺風格。
- 開箱即用的高質量 Angular 組件庫，與 Angular 保持同步升級。
- 使用 TypeScript 構建，提供完整的類型定義文件。
- 支持 OnPush 模式，性能卓越。
- 數十個國際化語言支持。
- 深入每個細節的主題定制能力。
創建一個Angular項目：
angular環境配置參考：https://www.cnblogs.com/Can-daydayup/p/14166192.html
在創建項目之前，請確保
@angular/cli已被成功安裝。
執行以下命令，@angular/cli 會在當前目錄下新建一個名稱為 YyFlight-NG-ZORRO的文件夾，並自動安裝好相應依賴。
ng new YyFlight-NG-ZORRO
自動完成 ng-zorro-antd 的初始化配置（推薦，簡單快速）：
進入新建的Angular項目目錄(YyFlight-NG-ZORRO)中:
cd YyFlight-NG-ZORRO
初始化ng-zorro-antd配置：
注意：執行以下命令后將自動完成 ng-zorro-antd 的初始化配置，包括引入國際化文件，導入模塊，引入樣式文件等工作。
ng add ng-zorro-antd
【重要】設置項目的相關配置，並選擇模板創建項目：
Skipping installation: Package already installed? Enable icon dynamic loading（正在跳過安裝：包已安裝？啟用圖標動態加載）：y
set up custom theme file（設置自定義主題文件）：y
choose your locale code（選擇區域設置代碼）：ZH-CN
choose template to create project（選擇模板創建項目）:sidemenu (頁面菜單)
啟動調試查看頁面效果：
ng serve --port 0 --open
手動安裝ng-zorro-antd：
安裝組件：
npm install ng-zorro-antd --save
如果上面命令安裝失敗，可以試試下面的cnpm安裝：
cnpm install ng-zorro-antd --save
引入樣式：
在 angular.json 中引入：
{
"styles": [
"node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
]
}
在 style.css 中引入css樣式文件：
@import "~ng-zorro-antd/ng-zorro-antd.min.css";
在 style.less 中引入 less 樣式文件：
@import "~ng-zorro-antd/ng-zorro-antd.less";
引入組件模塊：
以下面的 NzButtonModule 模塊為例，先引入組件模塊：
import { NgModule } from '@angular/core';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
NzButtonModule
]
})
export class AppModule { }
然后在模板中使用：
<button nz-button nzType="primary">Primary</button>