前言

如今的前端開發(fā)，都朝組件式開發(fā)模式靠攏，如果使用目前最流行的前端框架Angular和React開發(fā)應(yīng)用，不可避免地需要開發(fā)組件，也就意味著我們需要考慮組件間的數(shù)據(jù)傳遞等問題，不過Angular 2已經(jīng)為我們提供了很好的解決方案。

本文詳細(xì)介紹了Angular2父子組件共享服務(wù)通信的相關(guān)內(nèi)容，父子組件共享同一個(gè)服務(wù)，利用該服務(wù)實(shí)現(xiàn)雙向通信，下面來看看詳細(xì)的介紹：

第一步：定義服務(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)的子組件模版

最終效果：

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

最新評論