ネストされたオブザーバを扱う

Question

私はAngular 2でプロジェクトを開始していますが、Observablesで初めて対処しています。

私はこのように書きAPIサービスがあります（そのセッションがアクティブである間）

@Injectable() 
export class UserAPI { 

    [...] 

    login(email: string, password: string): Observable<Response> { 
    let params = new URLSearchParams(); 
    params.set('email', email); 
    params.set('password', password); 

    return this.$http.request(
     new Request({ 
     method: RequestMethod.Post, 
     url: this.baseUrl + '/login', 
     search: params 
     })) 
     .map((response: Response) => response.json()); 
    } 

    [...] 
} 

私はこれを呼び出す方法を含むユーザーサービスにユーザーセッションとそのプロファイルデータを管理していますAPI：

@Injectable() 
export class UserService { 

    [...] 

    constructor(private userAPI: UserAPI, private storage: StorageService) { 
    } 

    login(email: string, password: string) { 
    return this.userAPI.login(email, password).subscribe(
     (res) => { 
     this.storage.store(Constants.storage.session, res.token); 
     }, 
     (err) => { 
     this.storage.destroy(Constants.storage.session); 
     } 
    ); 
    } 

    [...] 
} 

は今、私はまた、ログインフォームを処理するコンポーネントを持っているし、成功した場合、アプリケーションのプライベートエリアにユーザーをリダイレクトしますが、それが失敗した場合、と提示しますエラーメッセージ（401、または他のエラーが発生した場合はそれが発生します）：

@Component({ 
    moduleId: module.id, 
    selector: "auth-login", 
    templateUrl: "auth.login.html" 
}) 
export class LoginComponent { 

    constructor(private router: Router, private userService: UserService) { 
    } 

    [...] 

    login(): void { 
    this.form.loading = true; 
    this.form.error = -100; // arbitrary number 

    this.userService.login(this.form.email, this.form.password); 
     /* 
     .subscribe(
     (res) => { 
     this.router.navigate(["/home", {}]); 
     }, 
     (err) => { 
     this.form.error = err.status; 
     }, 
    () => { 
     this.form.loading = false; 
     } 
    ); 
    */ 
    } 

    [...] 
} 

userService.login()のコメントコードに注意してください。それは私がコールの成功/失敗のどちらかを行うことを意図した指示ですが、それを働かせることはできません。私は物事を分けておきたいと思います。ユーザーサービスはセッションの部分を管理し、コンポーネントはリダイレクトを処理したり、ユーザーに何が間違っているかを示します。

私は間違っていますか？ここに行く方法は何ですか？ネストされたオブザーバブル？コンポーネントとユーザーサービスの間で約束を使用するか？いくつかの他のアプローチ？私はここで検索してきましたが、私と同じようなケースは見つかりませんでした。

Answer 1

私はあなたがそのようなサブスクリプションをチェーンできるとは思わない。効果的にthing.subscribe(...).subscribe(...)が動作することを期待しています。代わりに、サービス内の操作のための.mapと.catchを使用することができ、およびコンポーネントに.subscribeをしてみましょう。それをやった

login(email: string, password: string) { 
    return this.userAPI.login(email, password) 
     .map(res => { 
     this.storage.store(Constants.storage.session, res.token); 
     return res; 
     }) 
     .catch(err => { 
     this.storage.destroy(Constants.storage.session); 
     return Observable.throw(err); 
     }); 
}