自習(xí)室.28 | Angular 特性模塊 - 對組件進行分類
隨著 Angular 應(yīng)用的擴大,僅靠根模塊 ngModule 無法清晰的組織各種組件,為此,需要一個特性模塊來對代碼進行組織歸類。
例如 showcase 這個組件有幾種版本 showcase-v1, showcase-v2,那么我們就可以使用 showcase.module.ts 這樣的模塊來組織這些組件,然后再由 showcase 模塊導(dǎo)入到上一級或者頂級模塊中。
創(chuàng)建 showcase 特性模塊
ng g module showcaseCLI?會創(chuàng)建一個?showcase?文件夾,其中有模塊文件:showcase.module.ts

CommonModule?默認(rèn)都會導(dǎo)入,因為組件一般都可能會用到?ngIf?和?ngFor?這樣的指令
創(chuàng)建 showcase-v1, showcase-v2 組件
ng g component showcase/showcase-v1ng g component showcase/showcase-v2
這時你已經(jīng)發(fā)現(xiàn)?CLI?已經(jīng)自動幫你把組件導(dǎo)入到了?showcase?模塊中:

把?showcase?特性模塊導(dǎo)入到上一級(或者根模塊)
這里我們并沒有劃分得很深,所以直接把?showcase?模塊導(dǎo)入到根模塊

現(xiàn)在頁面應(yīng)該是報錯的,因為 showcase 模塊的 ngModule 并沒有暴露出組件,這里就是非常需要注意的地方:showcase 模塊(特性模塊)除了導(dǎo)入相關(guān)的組件,也要導(dǎo)出他們:

構(gòu)建一個很大的框架有很多組件的時候,對組件進行分類就非常有必要,需要用到的時候就導(dǎo)入到其他的模塊中使用。

掃碼二維碼申請入群內(nèi)推南寧IT職位助力于行業(yè)交流
評論
圖片
表情
