淺析Angular中非父子組件間怎麼通訊

Angular中非父子組件間怎麼通訊？這篇文章跟大家介紹一下Angular非父子元件之間透過服務通訊的方法，希望對大家有幫助！

其實提到父子元件之間傳值，對我們來說，再熟悉不過了，在業務實作過程中很常見。

但是我在實作的過程中涉及到跨級了（也就是非父子元件之間傳值），是的，我可以一層一層地往上傳遞，在父元件中拿到子組件的傳值，那有沒有更好的方式呢？ 【相關教學推薦：《angular教學》】

需求背景：

有一個子元件，可以理解為第三層元件，該組件中有個下拉框，當點擊某個li標籤的時候，需要將相應選中的值傳給第一級組件，同時，一級組件帶著接收到的值請求列表接口，進而刷新數據。

最初想法：

當時想著透過localstorage將使用者選取的值保存下來，在使用的元件中，再透過localstorage將值取出來，拿著該值請求介面；但是，無法做到實時，用戶選中後，沒有觸發我在父組件中獲取數據，也就是子組件中的值改變了，如何通知到父組件。

技術點：

Angular父元件和子元件透過服務來通訊

父元件和它的子元件共用同一個服務，利用該服務在組件家族內部實現雙向通訊。

該服務實例的作用域被限制在父元件和其子元件內。這個元件子樹以外的元件將無法存取該服務或與它們通訊。

原則

父元件和它的子元件共用同一個服務，利用該服務在元件家族內部實作雙向通訊。

該服務實例的作用域被限制在父元件和其子元件內。這個元件子樹以外的元件將無法存取該服務或與它們通訊。 服務是子元件與父元件之間的橋樑，因為服務可以很方便的注入到其它的元件當中，又因為Subject物件可以將資料多播（傳遞）給訂閱了這個物件的元件，因此結合Angular中的service和Rxjs中的Subject可以很方便的實作元件間的資料通訊。

實作：

在該子元件中建立一個service文件，程式碼如下：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class HeaderActionService {
  public pageTenantMode = new Subject<string>();
  // 获得一个Observable;
  missionConfirmed$ = this.pageTenantMode.asObservable();
  constructor() {}

  setParams(params) {
    this.pageTenantMode.next(params);
  }
}

子元件資料層呼叫上述方法，將值傳進去。

this.tenantModeService.setParams（）

父元件呼叫的地方注入上述服務，程式碼如下：

    headerModeService.missionConfirmed$.subscribe(
        () => {
          this.mode = headerModeService.pageTenantMode;
          this.initTableData();
        }
      );

更多程式相關知識，請造訪：程式設計入門！ ！

以上是淺析Angular中非父子組件間怎麼通訊的詳細內容。更多資訊請關注PHP中文網其他相關文章！