Angular2如何實(shí)現(xiàn)父子組件之間共享服務(wù)通信

小編給大家分享一下Angular2如何實(shí)現(xiàn)父子組件之間共享服務(wù)通信，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

第一步：定義服務(wù)

parentService.ts

1).這里用Injectable修飾這個(gè)類是一個(gè)服務(wù)，在其他用到地方只需要注入使用

(2).我們還定義了一個(gè)name變量并且初始化值，和一個(gè)公共的方法getData

parent.module.ts

我們這里把剛才創(chuàng)建的parentService服務(wù)依賴加進(jìn)來，接著在provides中注冊這個(gè)parentService服務(wù)，在ParentModule模塊中注冊之后，對于父組件和子組件來說都是指向同一個(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)槲覀冊趐arentModule模塊中，已經(jīng)將parentService 通過provides注冊過，所以我們在組件中不需要進(jìn)行注冊，直接可以使用，你可以這樣理解，把當(dāng)它想象成在模塊的容器中已經(jīng)存在了，只需要從容器中拿出來使用。

(1).這里我們定義了一個(gè)OnClick()方法，當(dāng)頁面點(diǎn)擊事件觸發(fā)，就會(huì)來調(diào)用parentService服務(wù)定義的方法getData()獲取返回值，彈出返回值。

對應(yīng)的父組件模版

在子組件中使用服務(wù)

因?yàn)楣蚕淼氖峭粋€(gè)ParentService服務(wù)實(shí)例，所以我們在子組件中也可以調(diào)用個(gè)ParentService服務(wù)的方法，代碼同上面用一樣

childen.component.ts

這里同樣定義了一個(gè)方法，用于測試調(diào)用parentService服務(wù)，代碼實(shí)現(xiàn)跟上面一樣，不在描述，

對應(yīng)的子組件模版

最終效果：

看完了這篇文章，相信你對“Angular2如何實(shí)現(xiàn)父子組件之間共享服務(wù)通信”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！