Angular 2サービスの非同期初期化

Question

私は、初期化が完了する前に非同期作業を行う必要があるAngular 2サービスを使用しています。

@Injectable() 
export class Api { 
    private user; 
    private storage; 

    constructor(private http: Http) { 
     this.storage = LocalStorage; 
     this.storage.get('user').then(json => { 
      if (json !== "") { 
       this.user = JSON.parse(json); 
      } 
     });   
    } 

    // one of many methods 
    public getSomethingFromServer() { 
     // make a http request that depends on this.user 
    } 
} 

現在のところ、このサービスは初期化されており、それを使用するコンポーネントにすぐに返されます。そのコンポーネントはngOnInitのgetSomethingFromServer()を呼び出しますが、その時点でApi.userは初期化されていないため、間違った要求が送信されます。

ライフサイクルフック（OnInit、OnActivateなど）はサービスでは使用できません。コンポーネントとディレクティブのみで動作しないため、使用できません。

get()からPromiseを保存するには、ユーザーがそれを待つためのさまざまな方法が必要となり、多くのコードの重複が発生します。

アンギュラ2でサービスを非同期初期化するにはどうすればよいですか？

Answer 1

ビットのためのティエリの回答で働いた後、私はそれが一度だけうまくいくことを発見し、それが正しい道に私を設定しました。私は代わりにユーザーの約束を保存し、新しい観察可能物を作成しなければならなかった。これはflatMap -edであった。

@Injectable() 
export class Api { 
    private userPromise: Promise<User>; 

    constructor(private http: Http) { 
    this.userPromise = LocalStorage.get('user').then(json => { 
     if (json !== "") { 
     return JSON.parse(json); 
     } 
     return null; 
    });   
    } 

    public getSomethingFromServer() { 
     return Observable.fromPromise(this.userPromise).flatMap((user) => { 
     return this.http.get(...).map(...); 
     }); 
    } 
    } 
} 

これはflatMap機能はティエリの回答のように、だけでなく、初めての、ユーザーが呼び出されるたびに取得することを保証します。

Answer 2

flatMap演算子を使用して観測可能な観測値を利用することができます。ユーザーがそこにいない場合は、それを待ってターゲット要求をチェーンすることができます。ここで

はサンプルです：

@Injectable() 
export class Api { 
    private user; 
    private storage; 
    private userInitialized = new Subject(); 

    constructor(private http: Http) { 
    this.storage = LocalStorage; 
    this.storage.get('user').then(json => { 
     if (json !== "") { 
     this.user = JSON.parse(json); 
     this.userInitialized.next(this.user); 
     } 
    });   
    } 

    // one of many methods 
    public getSomethingFromServer(): Observable<...> { 
    // make a http request that depends on this.user 
    if (this.user) { 
     return this.http.get(...).map(...); 
    } else { 
     return this.userInitialized.flatMap((user) => { 
     return this.http.get(...).map(...); 
     }); 
    } 
    } 
}