Talking about the event transfer of Angular2 subcomponents (any component event delivery)

event angular2 subcomponents transfer

angular2 There are many components that make up the picture by a number of routes, resulting in the transfer of events was “clumsy”, technical director of this group found any components pass the event of this method, taught me, I make a note of.

Project:

complex screen configuration, the number of routing ones, the number of components and more complicated nested. Business Requirements: Any occurrences of names, click on the names, directly open and the person’s chat screen

used to use angular2 official website to culinary skills to basically solve 90% of the demand, of course, if it is used Input, Output also Yes, but in that case, the structure would be chaos.

Appendix: Components angluar2 communications portal (the official website of Safari support anglar2 not very good, love life, please use Chrome)

realized

service:

which is the focus, the equivalent of an event queue, all the components of the injection this service, can initiate events, inserted into the queue, all Subscribe to this event queue component will receive the broadcast. (Being the first using a broadcast about the word)

  public eventbus: EventEmitter  = new EventEmitter  ();  

The chat component:

  constructor (private _workservice: WorkService) {// event subscription chat this._workservice.eventbus.subscribe ( _event => {if (_event && _ eveNt.name == 'chart') {// All components of all subscribers will receive event triggers on Eventbus, which is equivalent to broadcast. // So add a Name variable to the parameter transferred in the event to determine whether the event is given to me. // ......... // Write it will be written, pass _event to take parameters // .........}})}  

 this.WorkService.Eventbus.emit ({type: 3, voipaccount: userid}); // Note The parameter of Emit () is a JSON structure.   
Simply schematic

The above talks about Angular2 subcomponents ( Any component event passed) is the full content of Xiaobian sharing to everyone, I hope I can give you a reference, I hope everyone will support Tumi Cloud.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment