前言：
上一篇文章我們講了如何在建立的Angular專案中快速引入ng-zorro-antd企業中臺元件庫，並且快速構建後臺管理頁面框架模板。這一章主要介紹的是如何在建立好的後臺管理頁面框架的快速生成NG-ZORRO相關的元件，並且介紹Angular相關目錄結構、生命週期函式，路由配置和使用相關知識點，以及如何使用Angular CLI使用一行程式碼快速新增Angular應用的新功能。讓你快熟的構建一個屬於自己的NG-ZORRO後臺管理框架，注意我們的前端程式碼的編寫全部都是在VS Code上面編寫。
Angular專案目錄介紹（重要）：
app.module.ts（根模組）：
NgModule用於描述應用的各個部分如何組織在一起。 每個應用有至少一個 Angular 模組，根模組就是你用來啟動此應用的模組。 按照慣例，它通常命名為AppModule。
模組和元件關係：
注意：一個模組可以有多個元件，一個元件也可以有多個樣式表,但只有一個HTML模板。
|--app.module.ts(模組) |--app.component.ts(元件) |--app.component.html(HTML模板) |--app.component.css(CSS樣式表)
目錄結構描述：
## 說明 ```javascript |-- 檔名 // 說明 |-- 首層目錄 |-- e2e // 自動化整合測試目錄 |-- node_modules // npm/cnpm第三方依賴包存放目錄 |-- src // 應用原始碼目錄 |-- .editorconfig // 不同編譯器統一程式碼風格 |-- .gitignore // git中的忽略檔案列表 |-- angular.json // Angular的配置檔案 |-- browserslist // 配置瀏覽器相容性的檔案 |-- karma.conf.js // 自動化測試框架Karma的配置檔案 |-- package-lock.json // 依賴包版本鎖定檔案 |-- package.json // 標準的npm工具的配置檔案 |-- README.md // 專案說明的MakeDown檔案 |-- tsconfig.app.json // app專案的TypeScript的配置檔案 |-- tsconfig.json // 整個工作區的TypeScript配置檔案 |-- tsconfig.spec.json // 用於測試的TypeScript配置檔案 |-- tslint.json // TypeScript的程式碼靜態掃描配置 |-- src目錄 |-- app // 工程原始碼目錄 |-- assets // 資源目錄 |-- environments // 環境配置目錄 |-- favicon.ico // header裡的icon |-- index.html // 單頁應用的宿主HTML |-- main.ts // 入口ts檔案 |-- polyfills.ts // 不同瀏覽器相容指令碼載入 |-- karma.conf.js // 自動化測試框架Karma的配置檔案 |-- style.css // 整個專案的全域性css |-- test.ts // 測試入口 |-- app目錄 |-- app-routing.module.ts // app路由 |-- app.component.css // app的css |-- app.component.html // app的html |-- app.component.spec.ts // app的測試 |-- app.component.ts // app的元件 |-- app.module.ts // app的模組 |-- environments目錄 |-- environments.prod.ts // 生產環境 |-- environments.ts // 開發環境 ```
詳細目錄詳細介紹可查閱：
https://www.cnblogs.com/nightnight/p/11186387.html
https://blog.csdn.net/yuzhiqiang_1993/article/details/71191873
Angular中的元件生命週期函式：
什麼是生命週期函式？
通俗的來說，宣告周期函式就是元件建立，元件更新，元件銷燬是會觸發的一系列方法。
注意：constructor 建構函式（依賴注入，起到對應區域性變數值初始化作用）： 除了使用簡單的值對區域性變數進行初始化之外，什麼都不應該做！！！
|
鉤子
|
用途及時機
|
|
ngOnChanges()
|
當 Angular（重新）設定資料繫結輸入屬性時響應。 該方法接受當前和上一屬性值的 SimpleChanges 物件
在 ngOnInit() 之前以及所繫結的一個或多個輸入屬性的值發生變化時都會呼叫。
|
|
ngOnInit()
|
在 Angular 第一次顯示資料繫結和設定指令/元件的輸入屬性之後，初始化指令/元件。
在第一輪 ngOnChanges() 完成之後呼叫，只呼叫一次。[請求資料時使用]
|
|
ngDoCheck()
|
檢測，並在發生 Angular 無法或不願意自己檢測的變化時作出反應。
在每個變更檢測週期中，緊跟在 ngOnChanges() 和 ngOnInit() 後面呼叫。
|
|
ngAfterContentInit()
|
當 Angular 把外部內容投影進元件/指令的檢視之後呼叫。
第一次 ngDoCheck() 之後呼叫，只呼叫一次。
|
|
ngAfterContentChecked()
|
每當 Angular 完成被投影元件內容的變更檢測之後呼叫。
ngAfterContentInit() 和每次 ngDoCheck() 之後呼叫
|
|
ngAfterViewInit()
|
當 Angular 初始化完元件檢視及其子檢視之後呼叫。
第一次 ngAfterContentChecked() 之後呼叫，只呼叫一次。
|
|
ngAfterViewChecked()
|
每當 Angular 做完元件檢視和子檢視的變更檢測之後呼叫。
ngAfterViewInit() 和每次 ngAfterContentChecked() 之後呼叫。
|
|
ngOnDestroy()
|
每當 Angular 每次銷燬指令/元件之前呼叫並清掃。 在這兒反訂閱可觀察物件和分離事件處理器，以防記憶體洩漏。
在 Angular 銷燬指令/元件之前呼叫。
|
使用Angular CLI快速新增功能到現有的Angular應用程式：
Angular CLI介紹：
Angular CLI 是一個命令列介面(Command Line Interface)，用於實現自動化開發工作流程。它允許你做以下這些事情：
- 建立一個新的 Angular 應用程式
- 執行帶有
LiveReload支援的開發伺服器，以便在開發過程中預覽應用程式- 新增功能到現有的 Angular 應用程式
- 執行應用程式的單元測試
- 執行應用程式的端到端 (E2E) 測試
- 構建應用程式
![]()
使用命令新增功能到現有的 Angular 應用程式：
可以使用 ng generate 命令，為已有的 Angular 應用程式新增新的功能：
ng generate class my-new-class: 新建 class ng generate component my-new-component: 新建元件 ng generate directive my-new-directive: 新建指令 ng generate enum my-new-enum: 新建列舉 ng generate module my-new-module: 新建模組 ng generate pipe my-new-pipe: 新建管道 ng generate service my-new-service: 新建服務
ng generate 命令與其它的子命令一樣，也有快捷鍵，具體如下：
ng g cl my-new-class: 新建 class ng g c my-new-component: 新建元件 ng g d my-new-directive: 新建指令 ng g e my-new-enum: 新建列舉 ng g m my-new-module: 新建模組 ng g p my-new-pipe: 新建管道 ng g s my-new-service: 新建服務
在app/pages目錄下建立我們的部落格專案模組（帶路由配置模組）：
我們在開發一個專案可能會存在多個模組，比如說一個商城。存在商品模組，訂單模組，廣告模組，銷售管理等多個模組。那麼這個時候我們需要把這些模組單獨分離出來，按照模組化開發。接下來我將會通過開發一個簡單的部落格系統，主要分部落格管理和使用者管理兩個模組。帶領大家一步一步完善自己的專案模組頁面。
ng generate module /pages/MyBlog --routing
修改專案預設調轉頁面，Angular應用多模組路由配置：
找到app-routing.module.ts檔案，在【routes】物件中宣告新模組路由，以及專案預設調轉頁面地址修改。
在my-blog專案中建立部落格後臺頁面首頁元件，配置路由（多模組路由配置），宣告執行元件：
1、建立首頁元件：
ng generate component /pages/my-blog/index
2、配置首頁元件路由（多模組路由完美解決）：
首先，我們的部落格專案存在部落格管理和使用者管理兩個核心模組，我們建立了兩個模組，那麼我們如何在【app-routing.module.ts】應用路由檔案中配置多個模組的路由，我們可以通過延遲載入子路由的方式來載入相關模組的子路由。如下所示
前往【my-blog-routing.module.ts】檔案中配置上新建立的首頁元件的路由。
3、前往根模組【my-blog.module.ts】宣告首頁元件：
自定義頁面Layout佈局（動態選單欄配置）：
一般情況下我們的頁面動態選單都是從後臺讀取，然後遍歷繫結在【app.component.html】頁面中的，我們這裡沒有展示沒有涉及到後臺就是用固定式的路由。
專案樣式效果：
專案開源地址：