角度アプリケーションでAPIレスポンスを保存

Question

さまざまなコンポーネントで使用したいサイト構成を返すエンドポイントがあります。

getSiteConfig() { 
    return this.http.get('/json/siteConfig') 
    } 

私は次のようにこのエンドポイントを呼び出すことができます。このエンドポイントからの値が、私は本当にngrxストアを使用したくない変更するつもりはない

this.siteService.getSiteConfig() 
.subscribe(response => { 
    this.supportedLangs = response.languages; 
    .... etc 
}) 

。さまざまなコンポーネントで必要なので、私は各コ​​ンポーネントのAPI呼び出しをしたくないです。

さまざまなコンポーネントで常にこの設定を使用できるようにする最良の方法はありますか？サービスで

• ：：私は現在動作しているようだ、このメソッドを使用しています

  EDIT

  public siteconfig = new BehaviorSubject(null); getSiteConfig（）{

  this.http.get('/json/siteConfig') 
  .subscribe(response => { 
      this.siteconfig.next(response); 
  }) 
  

  }

  私が使用するコンポーネントで

そして：

this.storeService.siteconfig.filter(val => val !== null) 
.subscribe(res => this.availableLanguages = res.languages); 

は、任意のより良い解決策はありますか？

Answer 1

リゾルバについて聞きましたか？

ローカル変数がまだ設定されていない場合のみ、HTTPリクエストを送信するリゾルバを作成できます。例：ファイルのルーティングあなたに

：

const routes: Routes = [ 
{ 
    path: 'firstPath', 
    component: FirstComponent, 
    resolve: { 
     VariableName: MyResolverService 
    } 

}, 
{ 
    path: 'secondPath', 
    component: SecondComponent, 
    resolve: { 
     ***VariableName***: MyResolverService 
    } 
}, ...] 

は、これはあなたのリゾルバあなたが選択したパスに移動しているたびに呼び出し、コンポーネントが構築される前に、リゾルバ関数を呼び出します。あなたのリゾルバで

：例えばFirstComponentで

：

@Injectable() 
export class MyResolverService implements Resolve<any> { 

    private _supportedLangs: any; 

    constructor(private _siteService: SiteService) { } 

    resolve (route: ActivatedRouteSnapshot): Observable<any> { 
     if (!this._supportedLangs) 
      return this._siteService.getSiteConfig().map(result => { 
       console.log(result); 
       this._supportedLangs = result; 
      }); 
     return this._supportedLangs; 
    } 
} 

あなたはこのようにするコンポーネント内の値を取得することができます！

this.supportedLangs = this._route.snapshot.data['***VariableName***'];