Angular 2父子組件之間共享服務通信的實現(xiàn)

更新時間：2017年07月04日 10:59:36 作者：小處成就大事

這篇文章主要給大家介紹了關于Angular 2父子組件之間共享服務通信的相關資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。

前言

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

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

第一步：定義服務

parentService.ts

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

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

parent.module.ts

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

在父組件中使用服務

parent.component.ts

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

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

對應的父組件模版