Subscribe to an Existing Event

Events can only be created, published, and subscribed to from within a custom service, component model, or component. This article will walk you through subscribing to the ui.activated event from within a custom service.

Prerequisites

Create the Custom Service

Create a custom service with an _onInitialized and _onDestroy method.

src/services/CustomService.ts
import { ServiceBase } from "@vertigis/web/services";
export default class CustomService extends ServiceBase {
handles: IHandle[] = [];
protected async _onInitialize(): Promise<void> {
await super._onInitialize();
}
public async _onDestroy(): Promise<void> {
await super._onDestroy();
}
}

Register the Custom Service

Register the custom service in src/index.ts and set it to load on startup.

src/index.ts
import { LibraryRegistry } from "@vertigis/web/config";
import CustomService from "./services/CustomService";
export default function (registry: LibraryRegistry) {
registry.registerService({
id: "custom-service",
getService: (config) => new CustomService(config),
loadOnStartup: true,
});
}

Subscribe to the Event

Subscribe to the ui.activated event.

src/services/CustomService.ts
import { ServiceBase } from "@vertigis/web/services";
export default class CustomService extends ServiceBase {
handles: IHandle[] = [];
protected async _onInitialize(): Promise<void> {
await super._onInitialize();
this.handles.push(
this.messages.events.ui.activated.subscribe((id: string) => {
console.log(`Component '${id}' activated.`);
})
);
}
protected async _onDestroy(): Promise<void> {
await super._onDestroy();
this.handles.forEach((handle) => handle.remove());
}
}
Edit this page