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

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

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

angular2子組件的事件傳遞

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

項(xiàng)目情況：

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

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

附：angluar2的組件通訊的傳送門(anglar2的官網(wǎng)對(duì)Safari支持可不太好，真愛生命，請(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變量來判斷這個(gè)事件是不是給我的。
   // .........
   // 此處寫處理就行了，通過_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)文章

最新評(píng)論