angular 2+ Promises、Observable and async pipe

Question

私はAng 4の最初のプロジェクトに取り掛かり、小さな問題に遭遇しました。

私はサーバーに電話をかけると遅延があり、サーバーからフェッチしたデータを表示するために非同期パイプを使用する方法を学びました。

しかし、私が遭遇した問題は、例えば、サーバーへのHTTPコールを作成し、サーバーから情報が復帰するのを待っているということです。しかし、私はいくつかの番号を処理するためにその情報が必要です。つまり、実行時のコードが実行され、割り当てられる値が存在しないため、サーバーからの情報を待っている変数が未定義に戻ります。

サービスコールを行い、設定を取得するまでDoSomethingメソッドに知らせておくことが適切な方法は何ですか？また、あなたはあなたの設定を必要とするたびにHTTP呼び出しを常に行っていないようにあなたはどのようにそれを保存するだろうあなたのアプリを介して設定を使用していた場合。

私の直感は、app.componenet.tsに電話とストアをさせることでした。

ありがとうございます！

Answer 1

これは、あなたが実際に達成しようとしているものに応じて、DOや地図オペレータのための完璧なユースケースである：あなたが実際たくないのように、

this.settings = this.settingsService.getSettings().do(settings => this.doSomething(settings)); 

あなただけの「副作用」をしたい場合表示を送信しているデータに影響を与えるためには、表示に関係ない他の何かをしたいだけですが、シーケンスの特定のポイントで発生する必要があります（私はしばしばdo（）を使ってページ全体のコンテンツ読み込みポップアップなど）。 doSomething（）が使用されないので、値を返すかどうかは関係ありません。

this.settings = this.settingsService.getSettings().map(settings => this.transformSettings(settings)); 

ディスプレイに送信しているデータを実際に変更したい場合は、マップ演算子が頻繁に使用されます。 transformSettings（）は、最終的なサブスクライバに渡される値として、具体的に表示する値を返す必要があります。パート2については

、それは常にそれを必要とするすべてのコンポーネントが使用できるように、あなたのサービス層での動作対象に結果を格納：

private settingsSource = new BehaviorSubject(null); 
settings$ = this.settingsSource.asObservable().filter(e => !!e); //this prevents the initial null value from being sent 
loadSettings() { 
    this.http.get('settings').map(r => r.json()).subscribe(this.settingsSource); 
} 
constructor(private http: HttpClient) { 
    this.loadSettings(); 
} 

、あなたのコンポーネントドルの設定に加入していますそれがそこに着くたびにそこにいます。

Answer 2

は、通常、角度2のリターンオブザーバブルでサービスします。 これは、HTTP要求がサーバーからのデータで返されるまでに多少の時間がかかるからです。

getsettingsが正確に何をしているのかイムわからないが、一般的なセットアップは、次のようになります。

//service layer 
    function getSettings() { 
     return this.http.get(`server-url`) 
      .map((response: Response) => <any>response.json()) 
      .catch(this.handleError); 
} 

private handleError(error: Response) { 
    return Observable.throw(error.json() || 'Server error'); 
} 
//in your component 
this.service.getSettings().subscribe(result => {this.settings = result}, error => {console.log("there was an error.")}); 

httpリクエストがクライアントに応答した後、購読部分がトリガーされます。

Answer 3

道に沿ってあなたを助けるためにカップルの事：データは、サーバーから直接奉仕する準備ができている場合

• 非同期パイプは最適です。コンポーネントで必要な場合は、非同期パイプを使用するだけで購読してください。
• Angularは、http要求から観測可能な情報を返します。次に、subcribe（）関数を使用して、データが取得された場合や失敗した場合の動作を指定できます。

  ngOnInit(){ 
      this.settings = this.settingsService.getSettings().subscribe((settings)=>{ 
      this.settings = settings; 
      console.log("Logging Settings: " + this.settings); 
  } 
  

  行われた場合に開発者が意図したとおりにSingleton Patternに従ってください、あなたの2番目の質問、角度のサービスを、答えることとしている：あなたはこのような何かをしたい、あなたの特定のケースで

Here is a good tutorial on using http in an angular service

アプリ全体を通じて共有されたリソース。これは、それにアクセスするすべてが他のものと同じインスタンスを受信して​​いることを意味します。