Angular中非父子組件間是如何通訊的

本篇內(nèi)容介紹了“Angular中非父子組件間是如何通訊的”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

其實(shí)提到父子組件之間傳值，對(duì)我們來(lái)說(shuō)，再熟悉不過(guò)了，在業(yè)務(wù)實(shí)現(xiàn)過(guò)程中很常見(jiàn)。

但是我在實(shí)現(xiàn)的過(guò)程中涉及到跨級(jí)了（也就是非父子組件之間傳值），是的，我可以一層一層地往上傳遞，在父組件中拿到子組件的傳值，那有沒(méi)有更好的方式呢？

需求背景：

有一個(gè)子組件，可以理解為第三級(jí)組件，該組件中有個(gè)下拉框，當(dāng)點(diǎn)擊某個(gè)li標(biāo)簽的時(shí)候，需要將相應(yīng)選中的值傳給第一級(jí)組件，同時(shí)，一級(jí)組件帶著接收到的值請(qǐng)求列表接口，進(jìn)而刷新數(shù)據(jù)。

最初思路：

當(dāng)時(shí)想著通過(guò)localstorage將用戶選中的值保存下來(lái)，在使用的組件中，再通過(guò)localstorage將值取出來(lái)，拿著該值請(qǐng)求接口；但是，無(wú)法做到實(shí)時(shí)，用戶選中后，沒(méi)有觸發(fā)我在父組件中獲取數(shù)據(jù)，也就是子組件中的值改變了，如何通知到父組件。

技術(shù)點(diǎn)：

Angular父組件和子組件通過(guò)服務(wù)來(lái)通訊

父組件和它的子組件共享同一個(gè)服務(wù)，利用該服務(wù)在組件家族內(nèi)部實(shí)現(xiàn)雙向通訊。

該服務(wù)實(shí)例的作用域被限制在父組件和其子組件內(nèi)。這個(gè)組件子樹(shù)之外的組件將無(wú)法訪問(wèn)該服務(wù)或者與它們通訊。

原理

父組件和它的子組件共享同一個(gè)服務(wù)，利用該服務(wù)在組件家族內(nèi)部實(shí)現(xiàn)雙向通訊。

該服務(wù)實(shí)例的作用域被限制在父組件和其子組件內(nèi)。這個(gè)組件子樹(shù)之外的組件將無(wú)法訪問(wèn)該服務(wù)或者與它們通訊。 服務(wù)是子組件與父組件之間的橋梁，因?yàn)榉?wù)可以很方便的注入到其它的組件當(dāng)中，又因?yàn)镾ubject對(duì)象可以將數(shù)據(jù)多播（傳遞）給訂閱了這個(gè)對(duì)象的組件，因此結(jié)合Angular中的service和Rxjs中的Subject可以很方便的實(shí)現(xiàn)組件間的數(shù)據(jù)通訊。

實(shí)現(xiàn)：

在該子組件中創(chuàng)建一個(gè)service文件，代碼如下：

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

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

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

子組件數(shù)據(jù)層調(diào)用上述方法，將值傳進(jìn)去。

this.tenantModeService.setParams（）

父組件調(diào)用的地方注入上述服務(wù)，代碼如下：

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

“Angular中非父子組件間是如何通訊的”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！