簡介
angular2及以后的版本（包括angular4）都稱為angular胆绊。組件之間的傳值主要分為父子組件間傳值和兄弟組件傳值兩大類敢伸，其中父子組件傳值又分為父組件向子組件傳值和子組件向父組件傳值兩種。
一步淹、父組件向子組件傳值
1.1 示例一
父組件中把roleName傳給子組件使用
以上四步即完成了一個父組件向子組件傳值的操作霉祸。
1.2 示例二：攔截輸入屬性
子組件可以攔截輸入屬性的數(shù)據(jù)并進行相應(yīng)的處理乳乌，即使用setter攔截輸入屬性或ngOnChanges監(jiān)聽數(shù)據(jù)變化，這里僅示例setter的方式
1.3 父組件通過局部變量獲取子組件引用
在父組件的模板中為子組件創(chuàng)建一個局部變量叙淌，這個父組件可以通過這個局部變量來獲得讀取子組件公共成員變量和函數(shù)的權(quán)限秤掌；模板局部變量的作用域范圍僅存在于定義該模板局部變量的子組件愁铺。
1.4 父組件使用@ViewChild獲取子組件的引用
由于模板局部變量只能在模板中使用，而不能直接在父組件類中使用闻鉴，這有一定的局限性茵乱，這里介紹一種更優(yōu)雅的數(shù)據(jù)傳遞方式---@ViewChild。
當(dāng)父組件需要獲取子組件中變量或者方法的讀取權(quán)限時椒拗，可以通過@ViewChild注入的方式來實現(xiàn)似将，組件中ViewChild的作用是聲明對子組件元素的實例引用，它提供了一個參數(shù)來選擇將要引用的組件元素蚀苛，這個參數(shù)可以是一個類的實例在验，也可以是一個字符串，它們實現(xiàn)的功能一樣堵未，只是表現(xiàn)形式不同腋舌，具體如下：
- 參數(shù)為類實例，表示父組件將綁定一個指令或者子組件實例渗蟹。
- 參數(shù)為字符串類型块饺，表示將起到選擇器的作用，即相當(dāng)于在父組件中綁定一個模板局部變量雌芽，獲取到子組件的一份實例對象的引用授艰。
1.41 下面是第一種參數(shù)類型（其中ContactCollectComponent是子組件）:
- 1.42 當(dāng)參數(shù)為字符串時
- 在父組件中引入
ElementRef
import { Component, OnInit, ElementRef } from '@angular/core'; - 在父組件模版中自組件上加局部變量
#xxxx
<flex-search-bar-history #historysearch></flex-search-bar-history> - 在父組件類中如下操作
@ViewChild('historysearch') historySearch: ElementRef; - 之后就可以在父組件中操作子組件的變量或方法類，比如
this.historySearch['searchString'] = '';
- 在父組件中引入
二世落、子組件向父組件傳值
2.1 示例一
子組件的輸出屬性onCollect傳遞給父組件淮腾，當(dāng)父組件監(jiān)測到子組件的onCollect動作時就會執(zhí)行父組件中相應(yīng)的方法，下面案例中同時父組件也把detail傳給了子組件
2.2 示例二
子組件的聯(lián)系人id傳給父組件使用
父組件綁定的事件通過$event對象來訪問num（即payload）的數(shù)據(jù)屉佳。
2.3 在子組件中獲取父組件的引用
- 已知父組件的類型
這種情況可以直接通過在構(gòu)造函數(shù)中注入ParentComponent來獲取已知類型的父組件引用谷朝，示例代碼如下：
- 未知父組件的類型
一個組件可能是多個組件的子組件，有時候無法直接知道父組件的類型武花，在Angular中圆凰，可通過“類-接口”的方式來查找，即讓父組件通過提供一個與“類-接口”標識同名的別名來協(xié)助查找体箕。
首先創(chuàng)建Parent抽象類专钉，它只聲明了name屬性，沒有實現(xiàn)（賦值）累铅，示例代碼如下：
然后在ParentComponent組件的providers元數(shù)據(jù)中定義一個別名Provider驶沼，用useExisting來注入ParentComponent組件的實例，示例代碼如下：
通過下面的代碼争群，在子組件中就可以通過Parent這個標識找到父組件的實例來回怜，示例代碼如下：
三、兄弟組件間傳值
利用單例服務(wù)可組件間共享數(shù)據(jù)：
@Injectable({ providedIn: 'root' })
