Angular2サービスと優れた実践

Question

私はangular2という世界ではかなり新しく、いくつかのことを行う最善の方法を探しています。

これらのうちの1つは次のとおりです.Httpエンドポイントを照会するサービスに最適な初期値はどれくらいですか？

次のコードを考えてみましょう。次のように私はこれを使用することができ

import { Injectable } from '@angular/core' 
import { Observable } from 'rxjs/Observable' 
import { BehaviorSubject } from 'rxjs/BehaviorSubject' 

@Injectable() 
export class CounterService { 
    private _counter : BehaviorSubject<Number> = new BehaviorSubject(0) 
    public counter : Observable<Number> = this._counter.asObservable() 

    constructor() { 
     this._counter.next(0) 
    } 

    public addOne() { 
     this._counter.next(this._counter.getValue() + 1) 
    } 
} 

を：

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Counter value is {{sCounter.counter | async}}</h2> 
     <button (click)="increment()">add one</button> 
    </div> 
    `, 
}) 
export class App { 
    constructor(private sCounter : CounterService) { 
    } 

    increment() { 
    this.sCounter.addOne() 
    } 
} 

（CFこのplunker）

しかし、明らかにいくつかのサービスは、データを取得するためのAPIを照会しますそれは私が正確にどのようにこれを処理するか分からないところです。

BehaviorSubjectは初期値が必要です（と、それは素晴らしいことだ）、その加入者に与えられますが、あなたはそれを聞いてまで、サービスは何も照会していないので、その初期値は予想何もないでしょうし、UIを壊すかもしれません。

例：あなたが見ることができるように、私はこのサービスに初めて加入するとき

import { Injectable } from '@angular/core' 
    import { Observable } from 'rxjs/Observable' 
    import { BehaviorSubject } from 'rxjs/BehaviorSubject' 

    @Injectable() 
    export class UserService { 
     private _user : BehaviorSubject<User> = new BehaviorSubject({} as User) 
     public user : Observable<User> = this._user.asObservable() 

     constructor (http: Http) {} 

     public fetchUser(id) { 
      this.http.get(`/user/${id}`).subscribe((user) => { this._user.next(user) }) 
     } 
    } 

、私は{}（ユーザーとしてキャスト）の代わりに、実際の利用者の受け取ることになります、それは問題につながる可能性があります。

これに従うパターンはありますか？

Answer 1

私はちょうどいいトリックをしたいと思うだけの値を取得するために.filterを追加しました。 :)

import { Injectable } from '@angular/core' 
import { Observable } from 'rxjs/Observable' 
import { BehaviorSubject } from 'rxjs/BehaviorSubject' 

@Injectable() 
export class UserService { 
    private _user : BehaviorSubject<User> = new BehaviorSubject({} as User) 
    public user : Observable<User> = this._user.asObservable() 
            .filter(user => user instanceof User) 

    constructor (http: Http) {} 

    public fetchUser(id) { 
     this.http.get(`/user/${id}`).subscribe((user) => { this._user.next(user) }) 
    } 
}