前言

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

本文詳細介紹了Angular2父子組件共享服務通信的相關內容，父子組件共享同一個服務，利用該服務實現雙向通信，下面來看看詳細的介紹：

第一步：定義服務

parentService.ts

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

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

parent.module.ts

我們這里把剛才創(chuàng)建的parentService服務依賴加進來，接著在provides中注冊這個parentService服務，在ParentModule模塊中注冊之后，對于父組件和子組件來說都是指向同一個服務實例，而且這個服務的作用域只在當前這個模塊中有效，這句話理解了，就等于理解了父子組件共享服務實現數據通信

在父組件中使用服務

parent.component.ts

導入parentService服務，在構造函數中聲明注入parentService服務，因為我們在parentModule模塊中，已經將parentService 通過provides注冊過，所以我們在組件中不需要進行注冊，直接可以使用，你可以這樣理解，把當它想象成在模塊的容器中已經存在了，只需要從容器中拿出來使用。

(1).這里我們定義了一個OnClick()方法，當頁面點擊事件觸發(fā)，就會來調用parentService服務定義的方法getData()獲取返回值，彈出返回值。

對應的父組件模版

在子組件中使用服務

因為共享的是同一個ParentService服務實例，所以我們在子組件中也可以調用個ParentService服務的方法，代碼同上面用一樣

childen.component.ts

這里同樣定義了一個方法，用于測試調用parentService服務，代碼實現跟上面一樣，不在描述，

對應的子組件模版

最終效果：

總結

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