중첩 관측 가능 객체 다루기

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); 
     }); 
}