angular2子組件的事件傳遞

angular2有很多組件組成，畫面由很多路由，導致事件的傳遞很“笨拙”，本組的技術負責人發現了任意組件傳遞事件的這個方法，教會了我，我做個筆記。

項目情況：

畫面結構復雜，路由數目偏多，組件數目多，嵌套復雜。業務要求：任何出現人名的地方，點擊人名，直接打開和這個人的聊天畫面

以前用angular2官網給的烹飪技巧基本解決90%的需求，當然這個如果是用Input,Output也可以，但是那樣的話，結構將是混沌狀態。

附：angluar2的組件通訊的傳送門(anglar2的官網對Safari支持可不太好，真愛生命，請用chrome)

實現

service:

這是重點，相當于一個事件隊列，所有注入此service的組件，都可以發起事件，插入到隊列中，所有訂閱此事件隊列的組件都會收到廣播。（暫時先用廣播這個詞吧）

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

聊天組件：

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

發起聊天的組件：

this.workService.eventbus.emit({type:3,voipAccount:userid}); // 注意emit()的參數是json結構。

簡單示意

Created with Rapha?l 2.1.0任意組件（存在聊天事件的組件）任意組件（存在聊天事件的組件）serviceservice聊天組件聊天組件聊天組件聊天組件我要和李四聊天有人要和李四聊天，打開聊天畫面打開與李四的聊天組件聊吧

---

總結

以上是生活随笔為你收集整理的angular2子组件的事件传递(任意组件事件传递)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。