Angular 2: Making a "global parameters service" and subscribing to its parameters -

i'm working on angular 2 app, want store "global variables" (state) across different components. can user's choice of year , customerid etc. components need access these, use in get calls api/backend.

i have implemented router parameters, possible pass parameters component way, find easier work having maintain state forwarding parameters through router on every click. hope makes sense.

anyway, following this question on stackoverflow, i've set following service:

import { injectable } '@angular/core'; import { observable } 'rxjs/observable'; import 'rxjs/add/operator/share'; import { observer } 'rxjs/observer';  interface params {     year: string;     customerid: number; };  @injectable() export class parameterservice {      // initial (test) values:     p: params = {         year: "2017",         customerid: 101     };      constructor() {} } 

this seems work, 2 ways, allowing components , set parameters this:

    // global value     this.year = this._parameterservice.p['year'];      // set global value     this._parameterservice.p['year'] = "2018"; 

and data binding works, too. due p being class (object), rather accessing string year directly, understand it. if change year value component1, component2 (below) reflect change:

  <h1>year = {{this._parameterservice.p['year']}}</h1> 

all need inject parameterservice component needs it, , i'm done. however, can't figure out how extend such component reload (execute get call) changed parameter.

for router parameters, component "subscribes" params in ngoninit method, causing "refresh" whenever route changes:

ngoninit(): void {     this.sub = this._route.params.subscribe(params => {         this.customerid = params['customerid'];         this.year = params['year'];          this.resetcomponentstate(); // based on new parameter time     });  }  resetcomponentstate(): void {      this._otherservice.getdatafromapi(this.year)         .then(         mydata => this.mydata = mydata,         error => this.errormessage = <any>error); } 

how can achieve same thing based on parameterservice? possible somehow "bind" this.year this._parameterservice.p['year'] in resetcomponentstate()? btw, have tried doing that, no effect.

update here full component want refresh on parameter change (not router parameter change):

import { component, input, oninit } '@angular/core'; import { mydata} './mydata'; import { activatedroute } '@angular/router'; import { otherservice } './other.service'; import { observable } 'rxjs/observable'; import { subject } 'rxjs/subject'; import { headers, requestoptions } '@angular/http'; import { parameterservice } '../parameter.service'; import { localstorageservice } 'angular-2-local-storage';  @component({     templateurl: 'app/test/test.component.html' })  export class testcomponent implements oninit {      subscription: any;     customerid: string;      // set getter property on variable `year`:     ////year: string;     year(): string {       console.log("test.component.get()");       const value = this._parameterservice.p['year'] + "";       // other code need execute when data changed here       this.getdatafromapi();       return value;     }      private sub: any;      errormessage: string;     data: mydata[];     constructor(private _otherservice: otherservice,         private _parameterservice: parameterservice,         private _route: activatedroute,         private _localstorageservice: localstorageservice) { }      getdatafromapi() {          // store route parameters in local storage         // if none found, try reading local storage         if (this.customerid == null)             this.customerid = this._localstorageservice.get('customerid') + "";         //if (this.year== null)         //    this.year = this._localstorageservice.get('year') + "";                      this._localstorageservice.set('customerid', this.customerid);         //this._localstorageservice.set('year', this.year);          // try getting year (not customerid, yet) getter         this._otherservice.getdatafromapi(this.customerid, this.year)             .then(             data => this.data = data,             error => this.errormessage = <any>error);     }      getdata(): void{         this.data = this._otherservice.getdata();     }      resetcomponentstate(): void {         this.getdatafromapi();     }      ngoninit(): void {          this.sub = this._route.params.subscribe(params => {             this.customerid = params['customerid'];             //this.year = params['year'];              this.resetcomponentstate(); // based on new parameter time         });     } } 

use getters , setters. this:

// global value year() {    const value = this._parameterservice.p['year'];    // other code need execute when data changed here    this.getdatafromapi();    return value; }  set year(value) {    this._parameterservice.p['year'] = value; } 

i have blog post here: https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

and plunker here: https://plnkr.co/edit/kt4jlmpcwgbm2xdzqei9?p=preview