angular組件交互

這周在寫項目的原型，沒遇到什麼太大的問題，抽空把angular組件交互看了一下，記錄一下。

組件之間的交互主要是在主從組件之間進行交互.在一個組件的模板裏使用了另外一個組件，這兩個組件之間就是主從組件的關係。一個爲宿主(父組件)組件,一個爲子組件.

在FatherComponent組件中使用的child組件,此時father就是child的父組件.

從父組件到子組件

@Input()裝飾器

就像angular其餘指令的數據綁定同樣，能夠在子組件設置從外獲取數據,用@Input()裝飾器，就能夠把類中的數據綁定到指令的屬性上。

調用的時候:

setter截取

將@Input裝飾器放在setter方法上能夠對獲取的數據進行處理:

這裏父親的年齡是22歲，假定兒子小10歲，在把年齡傳過去時將兒子年齡減少十歲.

將@Input裝飾器綁定到set方法以後就能夠根據本身的需求過濾數據了

從子組件到父組件

子組件綁定父組件數據是單向的，所以子組件數據改變並不會反應到父組件中，要想從子組件的數據傳遞到父組件，能夠讓子組件暴露事件，父組件監聽事件，從而在須要時從子組件獲取數據。
首先在子組件中定義一個事件發射器，用來發送咱們的事件，這個事件發射器實際上是一個可觀察對象，咱們在子組件中經過@Output()裝飾器把這個事件發射器暴露出去後，父組件經過註冊這個屬性來訂閱這個可觀察對象。

父組件用一個事件處理方法來綁定這個屬性:

在這裏當事件觸發時，父組件將更新本身的年齡.
接下來就是定義什麼時候觸發事件了，經過.emit()觸發事件發射器,在這裏點擊加一歲按鈕就會增長子組件的年齡，而且發送事件更新父組件年齡

經過.emit(this._age)成功把子組件的年齡傳給父組件，這是經過事件完成的，當點擊增長按鈕時，父組件也會更新年齡.
這也實現了組件之間的雙向綁定.

點擊加一歲:

更多組件交互方法官方文檔:angualr組件交互