2-6 【組件封裝】分離封裝第一個組件

index.ts內列出來當前目錄裏面，我想對外暴露的一些東西。好處是1，縮短文件名的導入，2是格力內部變化對外部的影響。

生成組件測試

會給咱們生成四個文件

還去更新了一個文件


看一下作了哪些改動。點擊這裏，這是VSCode裏面git的標籤。

改動1

能夠對文件歷史進行對比

本身模塊自己提供的組件，放在declarations的數組當前去


改動2


駝峯的寫法，生成後變成橫線的形式了。

每一個大寫字母用橫線作分隔，而後字母變成小寫


組件名仍是駝峯的形式，可是文件名用用駝峯分隔並用橫線分隔開。


這是生成的測試文件

其實是生成了一個目錄把組件都放在這個目錄裏面。


若是想把全部的組件都放在components的文件夾中的話。app的目錄下新建文件夾components

固然也能夠直接拖進這個components的文件夾內。咱們先刪除，用命令行的形式來演示建立組件到components文件夾內。

遷移代碼

app.components.css內的代碼複製到新建立的scrollableTab的組件的css文件內。




html的代碼也複製過來。


ts內的代碼也複製過去。

app主組件內引用子組件

在app的組件內引用這個組件。用它的selector

瀏覽器預覽效果

index.ts

組件內建立index.ts文件


文件內只進行導出。

components文件夾下index.ts

每一層目錄下都要建立index,ts


只引用到了scrollable-tab的目錄。

scrollable-tab到了這個目錄級別，他就會自動去找這個目錄下的index.ts

app.modules.ts內的引用

組件的引用也只只須要引用到components這層目錄就能夠了。



最終效果仍是沒有改變



 

結束