Angular 2父子組件之間共享服務(wù)通信的實(shí)現(xiàn)
前言
如今的前端開(kāi)發(fā)，都朝組件式開(kāi)發(fā)模式靠攏，如果使用目前最流行的前端框架Angular和React開(kāi)發(fā)應(yīng)用，不可避免地需要開(kāi)發(fā)組件，也就意味著我們需要考慮組件間的數(shù)據(jù)傳遞等問(wèn)題，不過(guò)Angular 2已經(jīng)為我們提供了很好的解決方案。
本文詳細(xì)介紹了Angular2父子組件共享服務(wù)通信的相關(guān)內(nèi)容，父子組件共享同一個(gè)服務(wù)，利用該服務(wù)實(shí)現(xiàn)雙向通信，下面來(lái)看看詳細(xì)的介紹：
第一步：定義服務(wù)
parentService.ts
1).這里用Injectable修飾這個(gè)類是一個(gè)服務(wù)，在其他用到地方只需要注入使用
(2).我們還定義了一個(gè)name變量并且初始化值，和一個(gè)公共的方法getData
parent.module.ts
我們這里把剛才創(chuàng)建的parentService服務(wù)依賴加進(jìn)來(lái)，接著在provides中注冊(cè)這個(gè)parentService服務(wù)，在ParentModule模塊中注冊(cè)之后，對(duì)于父組件和子組件來(lái)說(shuō)都是指向同一個(gè)服務(wù)實(shí)例，而且這個(gè)服務(wù)的作用域只在當(dāng)前這個(gè)模塊中有效，這句話理解了，就等于理解了父子組件共享服務(wù)實(shí)現(xiàn)數(shù)據(jù)通信
在父組件中使用服務(wù)
parent.component.ts
導(dǎo)入parentService服務(wù)，在構(gòu)造函數(shù)中聲明注入parentService服務(wù)，因?yàn)槲覀冊(cè)趐arentModule模塊中，已經(jīng)將parentService 通過(guò)provides注冊(cè)過(guò)，所以我們?cè)诮M件中不需要進(jìn)行注冊(cè)，直接可以使用，你可以這樣理解，把當(dāng)它想象成在模塊的容器中已經(jīng)存在了，只需要從容器中拿出來(lái)使用。
(1).這里我們定義了一個(gè)OnClick()方法，當(dāng)頁(yè)面點(diǎn)擊事件觸發(fā)，就會(huì)來(lái)調(diào)用parentService服務(wù)定義的方法getData()獲取返回值，彈出返回值。
對(duì)應(yīng)的父組件模版
在子組件中使用服務(wù)
因?yàn)楣蚕淼氖峭粋€(gè)ParentService服務(wù)實(shí)例，所以我們?cè)谧咏M件中也可以調(diào)用個(gè)ParentService服務(wù)的方法，代碼同上面用一樣
childen.component.ts
這里同樣定義了一個(gè)方法，用于測(cè)試調(diào)用parentService服務(wù)，代碼實(shí)現(xiàn)跟上面一樣，不在描述，
對(duì)應(yīng)的子組件模版
最終效果：
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
簡(jiǎn)介AngularJS中使用factory和service的方法
這篇文章主要簡(jiǎn)單介紹了AngularJS中使用factory和service的方法,主要針對(duì)自定義工廠和服務(wù)的創(chuàng)建來(lái)講,需要的朋友可以參考下2015-06-06
基于Angular 8和Bootstrap 4實(shí)現(xiàn)動(dòng)態(tài)主題切換的示例代碼
這篇文章主要介紹了基于Angular 8和Bootstrap 4實(shí)現(xiàn)動(dòng)態(tài)主題切換的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要介紹了AngularJS 自定義指令，這里整理了詳細(xì)的資料及簡(jiǎn)單實(shí)例代碼，有需要的小伙伴可以參考下2016-09-09
淺談Angular7 項(xiàng)目開(kāi)發(fā)總結(jié)
這篇文章主要介紹了淺談Angular7 項(xiàng)目開(kāi)發(fā)總結(jié)，本文在此做一次遇到問(wèn)題的總結(jié)，以便知識(shí)的掌握，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
AngularJs ng-change事件/指令的用法小結(jié)
本篇文章主要介紹了AngularJs ng-change事件/指令的小結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
下面小編就為大家?guī)?lái)一篇NodeJs——入門必看攻略。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
這篇文章主要給大家介紹了關(guān)于如何測(cè)試angular組件間傳值的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用angular組件具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
Angularjs實(shí)現(xiàn)帶查找篩選功能的select下拉框示例代碼
這篇文章主要介紹了Angularjs實(shí)現(xiàn)帶查找篩選功能的select下拉框的詳細(xì)過(guò)程及示例代碼，文中通過(guò)示例介紹的很詳細(xì)，相信會(huì)對(duì)大家學(xué)習(xí)使用Angularjs具有一定的參考借鑒價(jià)值，有需要的朋友們可以一起來(lái)看看。2016-10-10
Angular.js組件之input mask對(duì)input輸入進(jìn)行格式化詳解
這篇文章主要給大家介紹了關(guān)于Angular.js組件之input mask對(duì)input輸入進(jìn)行格式化的相關(guān)內(nèi)容，文中通過(guò)示例代碼詳細(xì)介紹了將銀行卡號(hào)和日期的方法，需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。2017-07-07
angular實(shí)現(xiàn)頁(yè)面打印局部功能的思考與方法
這篇文章主要給大家介紹了關(guān)于angular實(shí)現(xiàn)頁(yè)面打印局部功能的思考與方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-04-04