淺談angular2子組件的事件傳遞(任意組件事件傳遞)
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)對Safari支持可不太好，真愛生命，請用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)。
簡單示意
以上這篇淺談angular2子組件的事件傳遞(任意組件事件傳遞)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- angular 動(dòng)態(tài)組件類型詳解(四種組件類型)
- angular 實(shí)現(xiàn)下拉列表組件的示例代碼
- Angular7創(chuàng)建項(xiàng)目、組件、服務(wù)以及服務(wù)的使用
- angular4自定義組件非input元素實(shí)現(xiàn)ngModel雙向數(shù)據(jù)綁定的方法
- angular6的table組件開發(fā)的實(shí)現(xiàn)示例
- 詳解Angular中實(shí)現(xiàn)自定義組件的雙向綁定的兩種方法
- 詳解Angular6學(xué)習(xí)筆記之主從組件
- 詳解Angular動(dòng)態(tài)組件
相關(guān)文章
AngularJS使用攔截器實(shí)現(xiàn)的loading功能完整實(shí)例
這篇文章主要介紹了AngularJS使用攔截器實(shí)現(xiàn)的loading功能,結(jié)合完整實(shí)例形式分析了AngularJS攔截器的設(shè)置、調(diào)用及l(fā)oading功能實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-05-05
Angular 的 Change Detection機(jī)制實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了Angular 的 Change Detection機(jī)制實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
詳解AngularJS1.6版本中ui-router路由中/#!/的解決方法
本篇文章主要介紹了詳解AngularJS1.6版本中ui-router路由中/#!/的解決方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-05-05
angularjs中ng-bind-html的用法總結(jié)
這篇文章主要介紹了angularjs中ng-bind-html的用法總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
本文主要介紹AngularJS指令,這里整理了簡單的指令并附示例代碼，有需要的小伙伴可以參考下2016-08-08
AngularJs IE Compatibility 兼容老版本IE
本文主要介紹AngularJs IE Compatibility 兼容老版本IE的問題及解決辦法，有興趣的小伙伴可以參考下2016-09-09
AngularJS入門心得之directive和controller通信過程
Angular JS (Angular.JS) 是一組用來開發(fā)Web頁面的框架、模板以及數(shù)據(jù)綁定和豐富UI組件，接下來通過本文給大家介紹AngularJS入門心得之directive和controller通信過程，對angularjs相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01
這篇文章主要介紹了整理AngularJS中的一些常用指令,包括ng-app、ng-init、ng-model和ng-repeat這四個(gè)指令的講解,需要的朋友可以參考下2015-06-06
本文給大家總結(jié)了一些angularjs的基礎(chǔ)知識(shí)及相關(guān)示例，分享給大家，希望能對大家有所幫助。2015-01-01
Angular2.0實(shí)現(xiàn)modal對話框的方法示例
這篇文章主要介紹了Angular2.0實(shí)現(xiàn)modal對話框的方法,結(jié)合實(shí)例形式分析了angular2.0實(shí)現(xiàn)modal對話框的樣式、界面及功能等相關(guān)操作技巧,需要的朋友可以參考下2018-02-02