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>