angular2子組件的事件傳遞

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設、高性價比龍亭網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式龍亭網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設找我們，業(yè)務覆蓋龍亭地區(qū)。費用合理售后完善，十年實體公司更值得信賴。

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

項目情況：

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

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

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

實現(xiàn)

service:

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

public eventbus: EventEmitter = new EventEmitter();

聊天組件：

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

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

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

簡單示意

以上這篇淺談angular2子組件的事件傳遞(任意組件事件傳遞)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持創(chuàng)新互聯(lián)。