角2： "グローバルパラメータサービス"を作成し、そのパラメータに登録する

Question

私はいくつかの "グローバル変数"（状態）を異なるコンポーネント間に保存する角型2のアプリケーションに取り組んでいます。これは、ユーザがyearとcustomerIdなどを選択することができます。GET API /バックエンドの呼び出しで使用するには、すべてのコンポーネントがこれらのコンポーネントにアクセスする必要があります。

私はルータパラメータを実装しているので、このようにパラメータをコンポーネントに渡すことは可能ですが、クリックするたびにルータ経由でパラメータを転送することによって状態を維持する必要がありません。これが理にかなってほしい。

とにかく、StackOverflowの上this質問に続いて、私は次のようserviceを設定している：

import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/share'; 
import { Observer } from 'rxjs/Observer'; 

interface params { 
    year: string; 
    customerId: number; 
}; 

@Injectable() 
export class ParameterService { 

    // initial (test) values: 
    p: params = { 
     year: "2017", 
     customerId: 101 
    }; 

    constructor() {} 
} 

これは私のコンポーネントは、このようなパラメータを取得および設定することができ、2つの方法を動作するようです：

// get global value 
    this.year = this._parameterService.p['year']; 

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

データバインディングも機能します。これは、私が理解するように、stringyearに直接アクセスするのではなく、pがクラス（オブジェクト）であるためです。私はcomponent1からyear値を変更する場合は、component2（下）変更が反映されます：

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

私はそれを必要とするすべてのコンポーネントにParameterServiceを注入されて行う必要がある、と私は終わりだすべて。 しかし、変更されたパラメータで（別のGET呼び出しを実行）を再ロードするように、これをどのように拡張するかを理解できません。

ngOnInit(): void { 
    this.sub = this._route.params.subscribe(params => { 
     this.customerId = params['customerId']; 
     this.year = params['year']; 

     this.resetComponentState(); // based on new parameter this time 
    }); 
} 

resetComponentState(): void { 
    this._otherService.getDataFromApi(this.year) 
     .then(
     myData => this.myData = myData, 
     error => this.errorMessage = <any>error); 
} 

どのように基づいて同じことを達成することができます：ルータのパラメータの

は、コンポーネントは、ルート変更はいつでも、それは「リフレッシュ」させ、そのngOnInit方法でparamsに「サブスクライブ」 ParameterService？どういうわけかthis.yearをthis._parameterService.p['year']と「バインド」することは可能ですか？resetComponentState()？ Btw、I にはがやってみましたが、効果はありません。

import { Component, Input, OnInit } from '@angular/core'; 
import { MyData} from './mydata'; 
import { ActivatedRoute } from '@angular/router'; 
import { OtherService } from './other.service'; 
import { Observable } from 'rxjs/Observable'; 
import { Subject } from 'rxjs/Subject'; 
import { Headers, RequestOptions } from '@angular/http'; 
import { ParameterService } from '../parameter.service'; 
import { LocalStorageService } from 'angular-2-local-storage'; 

@Component({ 
    templateUrl: 'app/test/test.component.html' 
}) 

export class TestComponent implements OnInit { 

    subscription: any; 
    customerId: string; 

    // set getter as a property on the variable `year`: 
    ////year: string; 
    get year(): string { 
     console.log("test.component.get()"); 
     const value = this._parameterService.p['year'] + ""; 
     // Any other code you need to execute when the data is 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 from 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) from 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 this time 
     }); 
    } 
} 

Answer 1

使用ゲッターとセッター：

UPDATE は、ここで私は、パラメータの変化にリフレッシュする完全なコンポーネント（だけでなく、ルータパラメータの変更）です。このような何か：

// get global value 
get year() { 
    const value = this._parameterService.p['year']; 
    // Any other code you need to execute when the data is changed here 
    this.getDataFromApi(); 
    return value; 
} 

set year(value) { 
    this._parameterService.p['year'] = value; 
} 

私はここにこのことについてブログ記事を持っている：https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

そして、ここでplunker：一般的なグローバルサービスについてはhttps://plnkr.co/edit/KT4JLmpcwGBM2xdZQeI9?p=preview