淺談angular2子組件的事件傳遞(任意組件事件傳遞)
更新時間：2018年09月30日 08:45:54 作者：FreeMing-imduingui0
今天小編就為大家分享一篇淺談angular2子組件的事件傳遞(任意組件事件傳遞)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
angular2子組件的事件傳遞
angular2有很多組件組成，畫面由很多路由，導致事件的傳遞很“笨拙”，本組的技術負責人發(fā)現了任意組件傳遞事件的這個方法，教會了我，我做個筆記。
項目情況：
畫面結構復雜，路由數目偏多，組件數目多，嵌套復雜。業(yè)務要求：任何出現人名的地方，點擊人名，直接打開和這個人的聊天畫面
以前用angular2官網給的烹飪技巧基本解決90%的需求，當然這個如果是用Input,Output也可以，但是那樣的話，結構將是混沌狀態(tài)。
附：angluar2的組件通訊的傳送門(anglar2的官網對Safari支持可不太好，真愛生命，請用chrome)
實現
service:
這是重點，相當于一個事件隊列，所有注入此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ā)，相當于廣播。
// 所以使用在事件傳遞的參數中添加一個name變量來判斷這個事件是不是給我的。
// .........
// 此處寫處理就行了，通過_event取參數
// .........
}
}
)
}
發(fā)起聊天的組件：
this.workService.eventbus.emit({
type:3,
voipAccount:userid
});
// 注意emit()的參數是json結構。
簡單示意
以上這篇淺談angular2子組件的事件傳遞(任意組件事件傳遞)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了AngularJS 單元測試（一）詳解的相關資料,需要的朋友可以參考下2016-09-09
使用過angular2人都應該知道，angular2提供的Angular CLI來快速搭建，快速生成serives、component、derective、modulet各種模板...下面這篇文章主要給大家介紹了關于Angular Cli打包的一些事，需要的朋友可以參考下。2017-09-09
本篇文章主要介紹了AngularJS點擊添加樣式、點擊變色設置的實例代碼，具有一定的參考價值，有興趣的可以了解一下2017-07-07
這篇文章主要為大家介紹了Angular組件數據不能實時更新到視圖上的問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
本文主要介紹AngularJS ng-show 指令,這里對ng-show 指令的基礎知識做了詳細介紹,并附有代碼示例,希望能幫助學習AngularJS的同學2016-08-08
這篇文章主要介紹了Angular 4.x 路由快速入門學習，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
AngularJs Understanding Angular Templates
本文主要介紹AngularJs Understanding Angular Templates的資料，這里整理了詳細的資料及簡單示例代碼，有興趣的小伙伴的參考下2016-09-09
對angularJs中ng-style動態(tài)改變樣式的實例講解
今天小編就為大家分享一篇對angularJs中ng-style動態(tài)改變樣式的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Angular.js?實現帶手柄自由調整頁面大小的功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-12-12
本篇文章主要介紹了Angular客戶端請求Rest服務跨域問題的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09