アングル4ベースのサービスから単一の値を取得するためのパターン

Question

私は、Webアプリケーションのワイドな設定の保存と取得を可能にする、Angular 4ベースのサービス（C＃ベースのRESTful APIを使用）を構築しようとしています。すべての一般的なアプリケーション設定のキーと値のペアに基づくルックアップのようなもの。

アイデアはこれです：

1. は、クライアント側のJavaScriptの配列にC＃WEBAPIベースのRESTfulなサービスからのアプリケーションの起動時にすべての設定を取得し、角4サービスに保存されています。
2. 特定の設定が必要な場合は、最初にローカルで検索された配列でその設定を調べ、それを返します。
3. 上記の設定が見つからない場合は、その特定の設定のWebAPIサービスを呼び出して使用可能かどうかを確認し、取得します。また、検索された設定をクライアント側の配列にプッシュするので、必要になるまで呼び出す必要はありません。

私が午前問題はこれです：

私は待つこと、Webアプリケーションの状況を処理できるように、私は、ローカル配列の設定を持っている場合でも、観測を返すようにしたいです設定を取得するために使用します。

また、特定の設定のAPI呼び出しが失敗する状況も処理したいと考えています。

私が今持っているものは以下を参照してください。

'use strict'; 
import { Injectable } from '@angular/core'; 
import { Http, Response, Headers, RequestOptions } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import { EmptyObservable } from 'rxjs/observable/EmptyObservable'; 

import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/share'; 
import { Subject } from 'rxjs/Subject'; 
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 
import { ReplaySubject } from 'rxjs/ReplaySubject'; 
import { SettingAPIURLs } from '../global.urls'; 
import * as Interfaces from "../interfaces/models.interface"; 
import * as Classes from "../classes/models.classes"; 

@Injectable() 
export class SettingsService { 
    private _settings: BehaviorSubject<Classes.Setting[]>; 

    private settingDataStore: { 
     settings: Classes.Setting[] 
    } 

    constructor(private http: Http) { 
     this.settingDataStore = { settings: [] } 
    } 

    loadSettings() { 
     this.http.get(SettingAPIURLs.GetSettings) 
      .map(response => response.json()) 
      .subscribe(data => { 
       this.settingDataStore.settings = data; 
       this._settings.next(Object.assign({}, this.settingDataStore).settings); 
      }, error => { 
       console.log("There were errors in attempting to retrieve the web application's settings: " + error); 
      }); 
    } 

    get CurrentSettings() { 
     return this._settings.asObservable().share(); 
    } 

    retrieveSetting(SettingName: string): Observable<Classes.Setting> { 

     /* 

     I am lost as to what to do here. 

     */ 

     let returnedObservable: Observable<Classes.Setting> = new Observable<Classes.Setting>(); 
     if (typeof (SettingName) === "undefined" || SettingName === null) { 
      return new EmptyObservable(); 
     } 
     this.http.get(SettingAPIURLs.GetSetting + "?SettingName=" + SettingName) 
      .map(response => response.json()) 
      .first(); 
    } 
} 

Answer 1

Angularには、resolveという問題の解決策が組み込まれています。この記事では、それを使用する方法について説明します。

https://blog.thoughtram.io/angular/2016/10/10/resolving-route-data-in-angular-2.html

考え方は、偶数ページのロジックを実行する前にロードされたページのデータを持っているということです。

基本的な実装では、先に進んで設定APIを呼び出すリゾルバを作成する必要があります。次に、ルーティングを接続してリゾルバの使用を開始するだけです。

Answer 2

私が正しく理解していれば、他に存在する場合はhttpコールを送信したいと思う。あなたの設定オブジェクトがキーと値のペアオブジェクトであると仮定しています。なぜあなたはそれが配列であるかわかりません。

this.settingsService.retrieveSetting().subscribe(successFunction, failureFunction); 

あなたがいずれかを実行できます。上記のHTTP呼び出しのいずれかが、あなたは、このようなコンポーネントで処理できる例外が発生します失敗した場合

あなたはこの

// extract fetch part separately . If settings exist return it or do http call 
fetchSettings(){ 
    return this._settings.asObservable 
     .flatMap(settings => settings ? 
      Observable.of(settings) :   
      this.http.get(SettingAPIURLs.GetSettings) 
       .map(response => response.json()) 
       .do(data => { 
        this.settingDataStore.settings = data; 
        this._settings.next(
         Object.assign(
          {}, 
          this.settingDataStore).settings); 
     }) 
     .catch(error => { 
      console.log("..... " + error); 
     }); 
} 

loadSettings(){ 
    this.fetchSettings.subscribe(data => { 
     console.log('load Settings success', data);  
    }); 
} 

retrieveSetting(SettingName: string): Observable<Classes.Setting> { 
    this.fetchSettings() 
     .flatMap(settings => settings[SettingName]? 
      Observable.of(settings[SettingName]) : 
      this.http.get(SettingAPIURLs.GetSetting + 
          "?SettingName=" + SettingName) 
        .map(response => response.json()) 
        .do(res=> this._settings.value[SettingName] = res) 
     ); 
} 

ような何かを行うことができますエラーメッセージをユーザーに表示するか、サイトの要件に基づいて空白と見なします。