rxJsとAngular 2の2つの異なるコンポーネントで同じストリームにsubscribe（）を実行

Question

Ionic 2 Webアプリケーションでログインを設定しようとしていますが、私はobservablesを使用しています。

私はユーザーをログするためにリモートデータベースに接続するloginメソッドを持つauthモジュールを持っています。ログインに成功すると、私はのlocalStorage

にトークン（auth0）を格納したいので、これは私のauth.service.tsので

login(user: any) { 
    this.http 
     .get(SERVER_URL, { user_data }, options) 
     .map((response: Response) => response.json()) 
     .subscribe(
     data => this.authSuccess(data.jwt), 
     err => this.handleError(err)); 
    } 

で、これは自分自身で正常に動作していますさ。今、私はログイン画面を使用したいので、ユーザーがデータを送信すると、ログインが成功すると、アプリケーションはメイン画面にナビゲートし、そうでなければエラーメッセージを表示します。

ログインコンポーネントだからこの

loginUser(event) { 
    return this.authService 
     .login(event.user) 
     .subscribe(
     data => navigate_to_main, 
     err => display_error_and_stay_in_login); 
    } 

のようなものを持っている必要があり、私は、ログインが成功した場合にトークンを格納したいので、私はサービス内でのログイン方法に加入する必要がありますが、私はまた、必要LoginComponent内のloginUserメソッドを購読して、ログインが成功した場合にのみナビゲートします。

これはどのように行われますか？たぶん私はこれを適切なやり方ではないでしょう。

誰でも手助けできますか？ ありがとう！

Answer 1

auth.service.tsは、サブスクリプションを行うには、観察、許可ログインコンポーネントを返すことができます複数の場所からログインする必要がある場合、.cacheを使用して繰り返しリクエストを避けることができます。

private _login$; 

loginOnce(user: any) { 
    if (!this._login) { 
     this._login = this.loginUser(user).cache(); 
    } 
    return this._login; 
} 

コンポーネントからの使用：

this.authService.login(user).subscribe(response => ...) 

Answer 2

あなたauth.service.tsの変化の下に行うことで同じ操作を行うことができます。

login(user: any) { 
    return this.http 
     .get(SERVER_URL, { user_data }, options) 
     .map((response: Response) => response.json()) 
     .do(
     data => this.authSuccess(data.jwt), 
     err => this.handleError(err)); 
    } 

の場合：

login(user: any) { 
    return this.http 
    .get(SERVER_URL, { user_data }, options) 
    .map((response: Response) => { 
     let data = response.json(); 
     this.authSuccess(data.jwt) 
     return data; 
    }); 
} 

Answer 3

データを消費するときにのみ購読します。 catchでエラーを処理できます。

あなたはそれimport 'rxjs/add/operator/catch';

login(user: any) { 
    return this.http 
    .get(SERVER_URL, { user_data }, options) 
    .map((response: Response) => { 
     let data = response.json(); 
     this.authSuccess(data.jwt) 
     return data; 
    }).catch((err) => this.handleError(err)) 
}