上一篇文章我們講了如何在建立的Angular項目中快速引入ng-zorro-antd企業中台元件庫，并且快速建構背景管理頁面架構模闆。這一章主要介紹的是如何在建立好的背景管理頁面架構的快速生成NG-ZORRO相關的元件，并且介紹Angular相關目錄結構、生命周期函數，路由配置和使用相關知識點，以及如何使用Angular CLI使用一行代碼快速添加Angular應用的新功能。讓你快熟的建構一個屬于自己的NG-ZORRO背景管理架構，注意我們的前端代碼的編寫全部都是在VS Code上面編寫。
<code>NgModule</code> 用于描述應用的各個部分如何組織在一起。 每個應用有至少一個 Angular 子產品，根子產品就是你用來啟動此應用的子產品。 按照慣例，它通常命名為 <code>AppModule</code>。
注意：一個子產品可以有多個元件，一個元件也可以有多個樣式表,但隻有一個HTML模闆。
https://www.cnblogs.com/nightnight/p/11186387.html
https://blog.csdn.net/yuzhiqiang_1993/article/details/71191873
通俗的來說，聲明周期函數就是元件建立，元件更新，元件銷毀是會觸發的一系列方法。
生命周期鈎子詳解：https://angular.cn/guide/lifecycle-hooks
當 Angular 使用構造函數建立一個元件或指令後，就會按下面的順序在特定時刻調用這些生命周期鈎子方法：
注意：constructor 構造函數（依賴注入，起到對應局部變量值初始化作用）： 除了使用簡單的值對局部變量進行初始化之外，什麼都不應該做！！！
<col>
鈎子
用途及時機
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 是一個指令行接口(Command Line Interface)，用于實作自動化開發工作流程。它允許你做以下這些事情： 建立一個新的 Angular 應用程式 運作帶有 <code>LiveReload</code> 支援的開發伺服器，以便在開發過程中預覽應用程式 添加功能到現有的 Angular 應用程式 運作應用程式的單元測試 運作應用程式的端到端 (E2E) 測試 建構應用程式
可以使用 <code>ng generate</code> 指令，為已有的 Angular 應用程式添加新的功能：
<code>ng generate</code> 指令與其它的子指令一樣，也有快捷鍵，具體如下：
我們在開發一個項目可能會存在多個子產品，比如說一個商城。存在商品子產品，訂單子產品，廣告子產品，銷售管理等多個子產品。那麼這個時候我們需要把這些子產品單獨分離出來，按照子產品化開發。接下來我将會通過開發一個簡單的部落格系統，主要分部落格管理和使用者管理兩個子產品。帶領大家一步一步完善自己的項目子產品頁面。
找到app-routing.module.ts檔案，在【routes】對象中聲明新子產品路由，以及項目預設調轉頁面位址修改。
首先，我們的部落格項目存在部落格管理和使用者管理兩個核心子產品，我們建立了兩個子產品，那麼我們如何在【app-routing.module.ts】應用路由檔案中配置多個子產品的路由，我們可以通過延遲加載子路由的方式來加載相關子產品的子路由。如下所示
前往【my-blog-routing.module.ts】檔案中配置上新建立的首頁元件的路由。
一般情況下我們的頁面動态菜單都是從背景讀取，然後周遊綁定在【app.component.html】頁面中的，我們這裡沒有展示沒有涉及到背景就是用固定式的路由。
https://github.com/YSGStudyHards/YyFlight-NG-ZORRO
作者：追逐時光者 作者簡介：一個熱愛程式設計，善于分享，喜歡學習、探索、嘗試新事物，新技術的程式猿。 本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，否則保留追究法律責任的權利。如果該篇文章對您有幫助的話，可以點一下右下角的【♥推薦♥】，希望能夠持續的為大家帶來好的技術文章，文中可能存在描述不正确或錯誤的地方，歡迎指正、補充，不勝感激 ！