A simple publisher/subscriber service.
- Import service in your codes or download via npm or bower.
npm i --save angular2-pubsub
if you use Angular version 2.x.x plase install from npm with '2.0.6' tag. npm i --save angular2-pubsub@2.0.6
- Add module bundle to imports in your application.
... import { PubSubModule } from 'angular2-pubsub'; // <= HERE @NgModule({ declarations: [ RootComponent, NavigationComponent, OverlayComponent ], imports: [ BrowserModule, FormsModule, HttpModule, PubSubModule.forRoot() // <= AND HERE ], providers: [], bootstrap: [RootComponent] }) ...- And import service wherever you want
declare class PubSubService { private events: Object; $pub(event: string, eventObject?: any): void; $sub(): undefined; $sub(event: string): Observable<any>; $sub(event: string, callback: (value: any) => void): Subscription; $sub(event: string, callback: (value: any) => void, error: (error: any) => void): Subscription; $sub(event: string, callback: (value: any) => void, error: (error: any) => void, complete: () => void): Subscription; }Publish event to all subscriber.
etc.
export class OverlayComponent implements OnInit, OnDestroy { constructor(private pubsub: PubSubService) { } anyFunc(){ this.pubsub.$pub('pleaseCloseSidenav', 'helloIAmOverlay'); } }Subscribe to channel.
etc.
export class NavigationComponent implements OnInit, OnDestroy { sideanvSub: any; constructor(private pubsub: EventDispatcherService) { } ngOnInit() { // usage of $sub(event: string): <Observable<any>>; this.closeSidenavSub = this.pubsub.$sub('pleaseCloseSidenav').subscribe((from) => { this.sidenavOpened = false; }); // usage of $sub(event: string, callback: (value: any) => void, error?: (error: any) => void, complete?: () => void): Subscription; this.openSidenavSub = this.pubsub.$sub('pleaseOpenSidenav', (from) => { this.sidenavOpened = true; }); } ngOnDestroy() { this.closeSidenavSub.unsubscribe(); this.openSidenavSub.unsubscribe(); }See Changelog $sub method have one bug. RxJS Subscriber call subscribe method on start like Angular 1.x $scope.$watch.
Follow the steps to run the tests and build the source code.
npm install npm test npm run buildCommands above will generate the ready to use bundles under the ./dist folder.