兩個不相關的元件間通信

在實際的開發中兩個元件之間不一定有着強關聯。（這裡說的強關聯指的是父子關系，或者是兄弟關系。）是以我們不能使用對應的政策：

1. 父傳子 通過@Input
2. 子傳父 通過@Output
3. 兄弟關系通過尋找他們共同的父親，然後通過子到父在通過父到子之間傳遞。

但要是沒有對應的關聯怎麼辦呢？

今天偶然習得，是以就分享一下。可以通過将關聯這兩個關系的邏輯方法抽到一個service中，然後在service中定義一個EventEmitter（這個類在之前@Output中有提到過）,在事件的觸發點進行發射，在處理的地方進行接收即可，簡單來說就是起到一個承上啟下的作用。

有可能這麼說比較抽象，下面舉一個簡單的例子。

我們一共有兩個component：

1. search
2. product

需要的功能是這樣的：search元件會根據使用者輸入的查詢條件，通過請求背景，将結果顯示在component界面上。因為他們都有使用productService，可以這就是個"中間人"。

看一下productService的代碼：

//這個就是那個中間人，EventEmitter中的泛型指代的是查詢條件  
event: EventEmitter<object> = new EventEmitter();
//這是請求背景的方法
public getProductsByCondition(requestBody: object): Observable<any> {
    return this.http.post('/api/products/condition', requestBody);
  }           

看一下送出使用者查詢條件的方法：

onSearch() {
        //這個是檢驗表單的字段是否合法
    if (this.formModel.valid) {
      console.log(this.formModel.value);
      //使用那個中間人，發送一個事件
      this.productService.event.emit(this.formModel.value);
    }
             

看一下訂閱事件，并且更新product清單顯示的地方

//訂閱了那個中間人，并且更新商品清單。
this.productService.event.subscribe(params => {
      this.productList = this.productService.getProductsByCondition(params);
    });           

梳理一下：主要的思想是将查詢條件進行了傳遞，然後在需要更新的元件中，發送請求，并更新界面。