Anaulrajs2之組件篇

組件（Component）是構成Angular應用的基礎核心，通俗的說就是一個組件包含了一個特定的功能，而且組件之間協同工做以組裝成一個完整的應用程序；舉個栗子🌰，一輛汽車中包含不少個零件，部件：發動機，輪胎，變速箱等，這一個一個大大小小的零部件就是汽車的組件，固然這不是顆粒度最小的組件，發動機自己也是有不少更小的組件組成。下面咱們就來看看Angular中的組件吧！

1、Angular的組件

Angular的組件是自描述的，組件能夠和宿主元素進行交互，組件中能夠注入服務，組件有明確的Input&Output，這樣就使得每個服務均可以獨立存在，因此意味着任何一個組件均可以經過bootstrap來啓動，也能夠路由加載，或者在其餘組件中使用，大大提升了組件的複用性；

2、如何建立組件

建立組件主要有三步：

• 引入Component修飾器；
• 創建一個普通的類，用@Component修飾
• 從@Component中設置一些元數據：selector，template等

以下圖所示：

注意事項：

1. 組件修飾器：每一個組件類必需要有@Component修飾才能夠成爲Angular組件
2. 組件元數據：selector、template等
3. 模板：每一個組件都會關聯一個模板，這個模板就是最終顯示到頁面上的，頁面上的DOM元素就是此組件實例的宿主元素
4. 組件類：組件其實是一個普通的類，僅此而已

附：元數據一覽

• selector：用於定義組件在HTML代碼中匹配的元素。這個參數是必須設置的，若是不設置則默認是div，所以組件沒法定位準確的DOM元素。selector命名方式是「烤肉串式」，eg.hello-world，app-contact；
• template：爲組件指定一個內聯模板；
• templateUrl：爲組件指定一個外聯模板，指定外聯模板的URL地址，與template只能指定其中有一個，不能重複；
• styles：爲組件指定內聯樣式
• styleUrls：爲組件指定一系列外聯樣式表文件；和styles能夠重複指定，若是同時指定，則styleUrls會覆蓋styles；
• directives：用來引入其餘指令或組件，使得在模版中可使用指令或組件列表；注意：自定義的組件必須在使用前聲明，不然沒法使用
• pipes：指定在模板中使用的管道，通常用來格式化數據
• providers／viewProviders：爲組件注入指定的服務；

3、組件交互

　　一個組件能夠指定輸入或輸出的屬性，這是構成組件式自描述的緣由之一。輸入輸出的屬性可使用屬性修飾器@Input和@Output來修飾，而後經過（）和[]的語法來調用。有了輸入輸出熟悉組件間的交互就能夠很簡單了。從以前的描述咱們能夠知道Angular應用是由各式各樣的組件組成的，這些組件造成了一顆完整組件樹，數據就在這顆組件樹中進行交互。那麼組件與組件是怎樣交互的？包括父子組件間的，兄弟組件間的數據傳遞。下面介紹三種組件交互：

• 從父組件向子組件傳遞數據
• 從子組件向父組件傳遞數據

3.一、父組件向子組件傳遞數據

從父組件到子組件主要是經過輸入屬性來完成交互的。數據由父組件的輸入屬性綁定流入子組件，在子組件完成接收或攔截，以此實現數據從上而下的數據傳遞，

在父組件的模板中使用屬性（contactDetail），在子組件中用@Input修飾器修飾contactDetail屬性，以下圖所示

 

父組件把contact對象傳遞給輸入屬性contactDetail，而後子組件經過這個@Input()修飾器來獲取數據，成功得到父組件傳遞過來的數據。

由於Angularjs應用是由各式各樣的組件組成，當應用被啓動時，angular會從根組件開始啓動，並解析整棵組件樹，數據由上而下流向下一級子組件，不過目標屬性必須經過輸入屬性明確標記修飾才能夠接收來自父組件的數據。

可是有時候，拿到數據後能夠對數據進一步封裝處理，能夠把複雜的內部邏輯用訪問權限來隔絕外部調用，以免外部的錯誤調用影響到內部的狀態，同時也是吧內部負責的邏輯結構封裝成高度抽象可被簡單調用的屬性，以方便使用者調用，爲了實現這個功能，咱們能夠採起setter和getter攔截輸入屬性

經過setter和getter攔截輸入屬性

組件能夠經過屬性setter來攔截來自父組件的數據源，並對攔截到的數據進行再處理，以下圖所示，父組件不變，在子組件中變爲以下所示：

書籍流入子組件後被setter攔截器攔截，對數據進行加工處理，使得數據處理的自由度更好，數據的展現更符合預期。

3.二、從子組件向父組件傳遞數據 

子組件經過暴露一個EventEmitter屬性，這個屬性是輸出屬性，由@Output修飾，當有用戶行爲操做發生時該事件會被觸發，父組件則經過事件的綁定方式來訂閱來自子組件中觸發的事件，即在子組件中具體事件觸發時會發生在父組件中，示例以下：

 

上圖是在子組件中綁定了一個事件，當點擊該連接，則會觸發goDetail函數並吧參數傳入；

 

上圖是子組件中聲明瞭一個輸出屬性，同時在函數裏面咱們能夠看到，這個輸出屬性把參數一併丟給了父組件。

 

 

上圖是父組件模版中監聽了子組件中的事件（collect），當子組件collect觸發時，則父組件就會監聽到而且觸發相應的事件（onCollected（$event））

 

 

 

上圖是父組件中onCollected事件邏輯

經過上述的流程咱們能夠看到，父組件經過事件綁定的方式來監聽是否有來自子組件對應的事件被觸發，當對應的事件經過emit方法觸發後，在父組件中可以監聽到該事件，以此來完成相應的代碼邏輯