Angular實戰之使用NG-ZORRO建立一個企業級中後臺框架

前言：

　　在之前的一篇文章已經介紹過了，公司正在使用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>