認識Angular中的模組（NgModule）

文、意如老師

 

一、認識Angular中的模組（NgModule）

在我們先前的介紹中，元件預設都綁在AppModule模組中，隨著元件越來越多，如都放置在同一個模組中，恐怕會造成專案不好維護，因此我們需要將模組有系統的分類，先複習一下，開啟src\app\app.module.ts，可以看到之前所建立的元件，預設都綁在這裡。

 

在NgModule中帶有一個＠NgModule()裝飾器的類別也是一個函式(function)，當中有幾個重要參數。

 

基本參數有：declarations [ ]、exports [ ]、imports [ ]、provider [ ]、bootstrap [ ]。

declarations[ ]:

宣告畫面（View）需要相關的元件（component）、指令（directives）、管道（pipes）。如果要用到該元件的功能，就必須匯入 import 包含他的模組。 例如：

 

 

exports:[]

決定哪些功能要公開給外部使用。

 

imports:[]

引入會使用到的模組。

 

 

providers:[]

給某元件下使用

 

bootstrap:[AppComponent]:
 

根元件(root component)
只有根模組才需要設定這個 bootstrap 屬性

 

 

二、建立新模組

建立新模組指令為：ng generate module [name]
也可以使用縮寫指令 ：ng g m [name]
例如建立一個myfns的模組(Module)，指令：ng g m myfns
此時會自動在src/app下建立myfns/myfns.module.ts檔案

如果元件要使用到這個模組就必須將它註冊到該元件所屬的模組內。

 

 

三、建立元件並註冊到自己所建立的模組內

在路徑src/app/myfns模組下建立三個元件(mf1, mf2, mf3)

建立元件指令:
ng g c myfns/mf1
ng g c myfns/mf2
ng g c myfns/mf3

 

 

開啟 src/app/myfns/myfns.module.ts 可以看到剛剛所建立的三個元件都已自動被註冊到 myfns模組中了。

 

 

3-1、在app.component.html 中加入 mf1元件的功能

開啟路徑：app-routing.module.ts增加myfn1Component的路由規則，path 屬性設定為 myfn1。

 

 

接下來就可以在src/app/ app.component.html的樣板中插入一個mf1Component 的連結。

 

 

最後將mf1Component所屬的模組（myfnsModule）註冊到AppModule內。
路徑：src/app/app.module.ts

 

 

再重新執行 ng serve –open就可以正常運作了。

 

 

任務3-2：在mypage1元件中使用mf元件

首先開啟src/app/myfns/myfns.module.ts，接下來需要將mf1Component設定到 myfnsModule 的 exports 內。
例：

 

 

將mf1Component的tag <app-mf1></app-mf1>
加到路徑：src\app\mypage1\mypage1.component.html 中即可。

 

 

 

在src/app/app.component.html中加入 /p1 路徑
 

 

 

 

重啟專案：ng serve –open

 

 

最後加上<p></p>段落標籤樣式後，可以更清楚的看到此頁其實就是兩個元件。
開啟路徑：src/styles.css
輸入以下樣式：

 

 

完成檔如下：

 

 

我們已經了解了什麼是模組，也初步建立了模組，接下來就要開始介紹模板（template）語法，詳細介紹請參閱下一篇-認識Angular中的模板（Template）語法。

本文首圖圖片來源：Pexels

 

 

加入菜鳥救星學習會員，不定期獲得更多知識吧！點我註冊 / 登入

 

不同頻道，不同知識 ！