欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2018年09月30日 08:45:54   作者：FreeMing-imduingui0  
今天小編就為大家分享一篇淺談angular2子組件的事件傳遞(任意組件事件傳遞)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

angular2子組件的事件傳遞

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

項目情況：

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

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

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

實現(xiàn)

service:

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

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

聊天組件：

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

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

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

簡單示意

angular2子組件事件傳遞

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

相關(guān)文章

最新評論