[功能介紹-4] 組件間的溝通

通過輸入綁定數據從父項傳遞給子項

這是接受數據的子元件的內容hero-child.component.ts
子元件輸要被輸入的屬性有兩個,以@Input開頭來做宣告:

而這是父元件的內容,透過屬性綁定將值塞進子元件中

父元件的完整程式碼如下:

最後結果呈現:

攔截屬性的更改與設置

可將子元件的input宣告改為getter和setter,如下面範例

這樣當父元件傳空字串來時,子元件會自動輸出<no name set>字樣

Intercept input property changes with ngOnChanges()

在子組件裡,除了上述使用getter及setter外,也可以利用ngOnChanges()來取得改變的變數並做出回應
ngOnChanges()會傳入所有被改變的值changes: {[propKey: string]: SimpleChange}
下面是一個使用範例
子元件內容

父元件內容

最後成果如下圖

Parent listens for child event

子元件的EventEmitter財產是一個輸出的屬性,通常用@Output來宣告,如下:

而父元件的內容如下:

結果如圖:

Parent interacts with child via local variable

下面是範例,將子元件使用#來宣告為template變數,就可以在父元件內自由使用子元件變數:

Parent and children communicate via a service

服務內容:

父元件內容

子元件內容

結果如下圖:

更多本篇完整範例請見: live example / download example

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *