Event Aggregator
The Event Aggregator is a pub/sub event package that allows you to publish and subscribe custom events inside of your Aurelia applications. Some parts of the Aurelia framework use the event aggregator to publish certain events at various points of the lifecycle and actions taking place in the framework.
To use the Event Aggregator, we inject the
IEventAggregator
interface into our component. In the following code example, we inject it as ea
on our component class.import { ICustomElementViewModel, IEventAggregator } from 'aurelia';
export class MyComponent implements ICustomElementViewModel {
constructor(@IEventAggregator readonly ea: IEventAggregator) {
}
}
The Event Aggregator provides a subscribe method to subscribe to published events.
import { ICustomElementViewModel, IEventAggregator } from 'aurelia';
export class MyComponent implements ICustomElementViewModel {
constructor(@IEventAggregator readonly ea: IEventAggregator) {
}
bound() {
this.ea.subscribe('event name', payload => {
// Do stuff inside of this callback
});
}
}
In some situations, you might only want to subscribe to an event once. To do that, we can use the
subscribeOnce
method which will listen to the event and then dispose of itself once it has been fired.import { ICustomElementViewModel, IEventAggregator } from 'aurelia';
export class MyComponent implements ICustomElementViewModel {
constructor(@IEventAggregator readonly ea: IEventAggregator) {
}
bound() {
this.ea.subscribeOnce('event name', payload => {
// Do stuff inside of this callback just once
});
}
}
To publish (emit) an event, we use the
publish
method. You can provide an object to the publish method which allows you to emit data via the event (accessible as a parameter on the subscribe method).import { ICustomElementViewModel, IEventAggregator } from 'aurelia';
export class MyComponent implements ICustomElementViewModel {
constructor(@IEventAggregator readonly ea: IEventAggregator) {
}
bound() {
const payload = {
component: 'my-component',
prop: 'value',
child: {
prop: 'value'
}
};
this.ea.publish('component bound', payload);
}
}
It's considered best practice to dispose of your event listeners when you are finished with them. Inside of a component, you would usually do this inside of the
unbinding
method. The event will be of type IDisposable
which we will use to strongly type our class property.import { ICustomElementViewModel, IEventAggregator, IDisposable } from 'aurelia';
export class MyComponent implements ICustomElementViewModel {
private myEvent: IDisposable;
constructor(@IEventAggregator readonly ea: IEventAggregator) {
}
bound() {
this.myEvent = this.ea.subscribe('event name', payload => {
// Do stuff inside of this callback
});
}
unbinding() {
this.myEvent.dispose();
}
}
Last modified 30d ago