建站
咨詢
售后
建站咨詢
新聞中心
本篇內(nèi)容介紹了“Angular中非父子組件間是如何通訊的”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
發(fā)展壯大離不開廣大客戶長(zhǎng)期以來的信賴與支持，我們將始終秉承“誠(chéng)信為本、服務(wù)至上”的服務(wù)理念，堅(jiān)持“二合一”的優(yōu)良服務(wù)模式，真誠(chéng)服務(wù)每家企業(yè)，認(rèn)真做好每個(gè)細(xì)節(jié)，不斷完善自我，成就企業(yè)，實(shí)現(xiàn)共贏。行業(yè)涉及成都塔吊租賃等，在成都網(wǎng)站建設(shè)、成都營(yíng)銷網(wǎng)站建設(shè)、WAP手機(jī)網(wǎng)站、VI設(shè)計(jì)、軟件開發(fā)等項(xiàng)目上具有豐富的設(shè)計(jì)經(jīng)驗(yàn)。
其實(shí)提到父子組件之間傳值，對(duì)我們來說，再熟悉不過了，在業(yè)務(wù)實(shí)現(xiàn)過程中很常見。
但是我在實(shí)現(xiàn)的過程中涉及到跨級(jí)了（也就是非父子組件之間傳值），是的，我可以一層一層地往上傳遞，在父組件中拿到子組件的傳值，那有沒有更好的方式呢？
需求背景：
有一個(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í)想著通過localstorage將用戶選中的值保存下來，在使用的組件中，再通過localstorage將值取出來，拿著該值請(qǐng)求接口；但是，無法做到實(shí)時(shí)，用戶選中后，沒有觸發(fā)我在父組件中獲取數(shù)據(jù)，也就是子組件中的值改變了，如何通知到父組件。
技術(shù)點(diǎn)：
Angular父組件和子組件通過服務(wù)來通訊
父組件和它的子組件共享同一個(gè)服務(wù)，利用該服務(wù)在組件家族內(nèi)部實(shí)現(xiàn)雙向通訊。
該服務(wù)實(shí)例的作用域被限制在父組件和其子組件內(nèi)。這個(gè)組件子樹之外的組件將無法訪問該服務(wù)或者與它們通訊。
原理
父組件和它的子組件共享同一個(gè)服務(wù)，利用該服務(wù)在組件家族內(nèi)部實(shí)現(xiàn)雙向通訊。
該服務(wù)實(shí)例的作用域被限制在父組件和其子組件內(nèi)。這個(gè)組件子樹之外的組件將無法訪問該服務(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();
// 獲得一個(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)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
網(wǎng)站欄目：Angular中非父子組件間是如何通訊的
網(wǎng)頁鏈接：http://www.dlmjj.cn/article/gioeps.html
