自習室.28 | Angular 特性模塊 - 對組件進行分類

隨著 Angular 應(yīng)用的擴大，僅靠根模塊 ngModule 無法清晰的組織各種組件，為此，需要一個特性模塊來對代碼進行組織歸類。

例如 showcase 這個組件有幾種版本 showcase-v1, showcase-v2，那么我們就可以使用 showcase.module.ts 這樣的模塊來組織這些組件，然后再由 showcase 模塊導(dǎo)入到上一級或者頂級模塊中。

創(chuàng)建 showcase 特性模塊

ng g module showcase

CLI?會創(chuàng)建一個?showcase?文件夾，其中有模塊文件：showcase.module.ts

CommonModule?默認都會導(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)入到其他的模塊中使用。