typescript - Angular2 - Defining/Injecting Singleton -

i have alert directive defined, so:

import { component } 'angular2/core'; import { core_directives } 'angular2/common'; import { alert } 'ng2-bootstrap/ng2-bootstrap';  @component({   selector: 'alert_directive',   templateurl: './shared/directives/alert/alert.html',   directives: [alert, core_directives] }) export class alertdirective {   alerts:array<object> = [ ];    closealert(i:number) {     this.alerts.splice(i, 1);   }    addalert(message: string, style: string) {     this.alerts.push({msg: message, type: style, closable: true});     console.log(this.alerts);   } } 

i define app component include directive:

import {alertdirective} '../../shared/directives/alert/alert'; ... @component({   selector: 'app',   templateurl: './app/components/app.html',   styleurls: ['./app/components/app.css'],   providers: [userservice, http_providers],   encapsulation: viewencapsulation.none,   directives: [router_directives, alertdirective] }) ... 

this works, , directive shows in dom related app.html file.

this app.html file contains global html (navbar, footer, alert_directive). want alert_directive singleton can change alerts array on show alert messages view without having add directive each view.

so, in sign in component:

import {component, viewencapsulation} 'angular2/core'; import {alertdirective} '../../shared/directives/alert/alert'; @component({   selector: 'sign_in',   templateurl: './sign_in/components/sign_in.html',   styleurls: ['./sign_in/components/sign_in.css'],   encapsulation: viewencapsulation.emulated }) export class signincmp {   alertdirective: alertdirective;   constructor(alertdirective: alertdirective) {     this.alertdirective = alertdirective;   }    showalert() {     this.alertdirective.addalert('test', 'warning');   } } 

the issue here newing new instance of alertdirective, , therefore addalert method adding array of new instance, not existing instance defined in app component.

how can create directive singleton , inject 1 single instance each view, can call method on singleton , affect each injected instance?

create shared service (only registered in bootstrap()) , use communicate between components , alertdirective showb in how share data between components in angular2? service can contain eventemitter participants can subscribe passed messages.

@injectable() export class alertservice {   command: eventemitter = new eventemitter(); }  @component({   selector: 'alert_directive',   templateurl: './shared/directives/alert/alert.html',   directives: [alert, core_directives] }) export class alertdirective {   constructor(private alertservice: alertservice) {     alertservice.commands.subscribe((command) => { dosomething();}   }   alerts:array<object> = [ ];    closealert(i:number) {     this.alerts.splice(i, 1);   }    addalert(message: string, style: string) {     this.alerts.push({msg: message, type: style, closable: true});     console.log(this.alerts);   } }  @component({   selector: 'sign_in',   templateurl: './sign_in/components/sign_in.html',   styleurls: ['./sign_in/components/sign_in.css'],   encapsulation: viewencapsulation.emulated }) export class signincmp {   alertdirective: alertdirective;   constructor(alertservice: alertservice) {     this.alertservice = alertservice;   }    showalert() {     this.sharedservice.command.next({text: 'test', title: 'warning'});   } }  bootstrap(appcomponent, [/* other providers */, alertservice]);