淺談angular2子組件的事件傳遞(任意組件事件傳遞)

更新時(shí)間：2018年09月30日 08:45:54 作者：FreeMing-imduingui0

今天小編就為大家分享一篇淺談angular2子組件的事件傳遞(任意組件事件傳遞)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

angular2子組件的事件傳遞

angular2有很多組件組成，畫(huà)面由很多路由，導(dǎo)致事件的傳遞很“笨拙”，本組的技術(shù)負(fù)責(zé)人發(fā)現(xiàn)了任意組件傳遞事件的這個(gè)方法，教會(huì)了我，我做個(gè)筆記。

項(xiàng)目情況：

畫(huà)面結(jié)構(gòu)復(fù)雜，路由數(shù)目偏多，組件數(shù)目多，嵌套復(fù)雜。業(yè)務(wù)要求：任何出現(xiàn)人名的地方，點(diǎn)擊人名，直接打開(kāi)和這個(gè)人的聊天畫(huà)面

以前用angular2官網(wǎng)給的烹飪技巧基本解決90%的需求，當(dāng)然這個(gè)如果是用Input,Output也可以，但是那樣的話，結(jié)構(gòu)將是混沌狀態(tài)。

附：angluar2的組件通訊的傳送門(anglar2的官網(wǎng)對(duì)Safari支持可不太好，真愛(ài)生命，請(qǐng)用chrome)

實(shí)現(xiàn)

service:

這是重點(diǎn)，相當(dāng)于一個(gè)事件隊(duì)列，所有注入此service的組件，都可以發(fā)起事件，插入到隊(duì)列中，所有訂閱此事件隊(duì)列的組件都會(huì)收到廣播。（暫時(shí)先用廣播這個(gè)詞吧）

public eventbus: EventEmitter<any> = new EventEmitter<any>();

聊天組件：

constructor( private _workservice:WorkService) {
 // 訂閱聊天事件
 this._workservice.eventbus.subscribe(_event => {
  if (_event&&_event.name=='chart') {
  // 所有訂閱這個(gè)事件的組件都會(huì)收到eventbus上的事件觸發(fā)，相當(dāng)于廣播。
  // 所以使用在事件傳遞的參數(shù)中添加一個(gè)name變量來(lái)判斷這個(gè)事件是不是給我的。
   // .........
   // 此處寫(xiě)處理就行了，通過(guò)_event取參數(shù)
   // .........
  }
  }
 )
 }

發(fā)起聊天的組件：

 this.workService.eventbus.emit({
  type:3,
  voipAccount:userid
 });
// 注意emit()的參數(shù)是json結(jié)構(gòu)。

簡(jiǎn)單示意

angular2子組件事件傳遞

以上這篇淺談angular2子組件的事件傳遞(任意組件事件傳遞)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

AngularJS使用攔截器實(shí)現(xiàn)的loading功能完整實(shí)例
這篇文章主要介紹了AngularJS使用攔截器實(shí)現(xiàn)的loading功能,結(jié)合完整實(shí)例形式分析了AngularJS攔截器的設(shè)置、調(diào)用及l(fā)oading功能實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-05-05
Angular 的 Change Detection機(jī)制實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了Angular 的 Change Detection機(jī)制實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
詳解AngularJS1.6版本中ui-router路由中/#!/的解決方法
本篇文章主要介紹了詳解AngularJS1.6版本中ui-router路由中/#!/的解決方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-05-05
angularjs中ng-bind-html的用法總結(jié)
這篇文章主要介紹了angularjs中ng-bind-html的用法總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-05-05
AngularJS指令詳解及示例代碼
本文主要介紹AngularJS指令,這里整理了簡(jiǎn)單的指令并附示例代碼，有需要的小伙伴可以參考下
2016-08-08
AngularJs IE Compatibility 兼容老版本IE
本文主要介紹AngularJs IE Compatibility 兼容老版本IE的問(wèn)題及解決辦法，有興趣的小伙伴可以參考下
2016-09-09
AngularJS入門心得之directive和controller通信過(guò)程
Angular JS (Angular.JS) 是一組用來(lái)開(kāi)發(fā)Web頁(yè)面的框架、模板以及數(shù)據(jù)綁定和豐富UI組件，接下來(lái)通過(guò)本文給大家介紹AngularJS入門心得之directive和controller通信過(guò)程，對(duì)angularjs相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
2016-01-01
整理AngularJS中的一些常用指令
這篇文章主要介紹了整理AngularJS中的一些常用指令,包括ng-app、ng-init、ng-model和ng-repeat這四個(gè)指令的講解,需要的朋友可以參考下
2015-06-06
Angularjs基礎(chǔ)知識(shí)及示例匯總
本文給大家總結(jié)了一些angularjs的基礎(chǔ)知識(shí)及相關(guān)示例，分享給大家，希望能對(duì)大家有所幫助。
2015-01-01
Angular2.0實(shí)現(xiàn)modal對(duì)話框的方法示例
這篇文章主要介紹了Angular2.0實(shí)現(xiàn)modal對(duì)話框的方法,結(jié)合實(shí)例形式分析了angular2.0實(shí)現(xiàn)modal對(duì)話框的樣式、界面及功能等相關(guān)操作技巧,需要的朋友可以參考下
2018-02-02