2角度、観測 - 私は、ログインコンポーネントと簡単な方法を持って購読

Question

からいくつかのデータを返す：

login(event) {  
    event.preventDefault(); 
    this.authService.login(this.user);  
} 

これは私のAuthService次のとおりです。

export class AuthService { 
    constructor(private jsonApiService:JsonApiService) { 
    } 

    isLoggedIn: boolean = false; 

    login(user:User): any { 
     this.jsonApiService.post('/token', user) 
      .subscribe(
       resp => { 
        check if success, 
        store token to localstorage, 
        set isLoggedIn = true 
        * return new object with data about success/error 


       }, 
       err => {  
        handle error 
        * return new object with data about success/error 
       }); 
    } 

    logout(): void { 
     this.isLoggedIn = false; 
    } 
} 

このコードは正常に動作します。私は応答を得るが、サービスからコンポーネントへのデータを返す方法は不思議です。コンポーネントを購読する必要はありません。なぜなら、処理はAuthService内になければならないからです。

Answer 1

をラムダですが、このようなコールバックを渡すことができます（本質的にサブスクライブと同じです）：

login(user: User, onSuccess: (data) => void, onError: (data) => void = null): any { 
    this.jsonApiService.post('/token', user) 
     .subscribe(
      resp => { 
       check if success, 
       store token to localstorage, 
       set isLoggedIn = true 

       onSuccess(/*somedata*/); 
      }, 
      err => {  
       handle error 

       if (onError) 
        onError(/*somedata*/); 
      }); 
} 

そして、あなたのコンポーネントで：

login(event) {  
    event.preventDefault(); 
    this.authService.login(this.user, (data) => { 
     // do something here with the data 
    });  

    // or optionally with onError callback 
    this.authService.login(this.user, (data) => { 
     // do something here with the data 
    }, 
    (errData) => { 
     // do something with the error 
    });  
} 

Answer 2

おそらくあなたは、次のことを行うことができます：httpリクエストは非同期に動作するので、あなたの中から何かを返すことはできません

//のAuthService

export class AuthService { 
    constructor(private jsonApiService:JsonApiService) { 
    } 

    isLoggedIn: boolean = false; 

    login(user:User): any { 
     this.jsonApiService.post('/token', user) 
      .map(
       resp => { 
        /** 
        * check if success, 
        * store token to localstorage 
        */ 
        set isLoggedIn = true 
        //return new object with data about success/error 
        return resp.json(); // return response or your new created object 

       }); 
    } 

    logout(): void { 
     this.isLoggedIn = false; 
    } 
} 

//コンポーネント

login(event) {  
    event.preventDefault(); 
    this.authService.login(this.user).subscribe(res => { 
    console.log(res); 
    },err => {  
    handle error 
    * return new object with data about success/error 
    });  
} 

Answer 3

あなたは、関数のスコープ内の別の観察者にフックアップ、新たな観測可能を返し、このような何かを行うことができます。

このようにして、呼び出し側のコンポーネントは、返されたObservableにただ登録することができます。非同期パイプを使用するとobserver.nextが呼び出されるたびに通知されます

私はこれをテストしていないので、修正が必要な場合がありますが、正しい方向に向けることを願っています！

login(user:User): any { 
     return new Observable((observer: any) => { 
      this.jsonApiService.post('/token', user) 
       .subscribe(
       resp => { 
        check if success, 
        store token to localstorage, 
        set isLoggedIn = true 
        obs.next(someResponse); 
        obs.complete(); 
       }, 
       err => { 
        handle error 
        obs.next(someResponse); 
        obs.complete(); 
       }); 
     } 
    } 

Answer 4

あなたが観測可能にサブスクリプションがAuthServiceに含まれていることにしたいと非同期操作の結果である値を返すようにしたい場合は、あなたが探していることは約束であるように、それが聞こえます。

RxJS toPromise演算子を使用してこれを行うことができます。それはあなたのためsubscribe（およびunsubscribe）を管理します：

login(user: User): Promise<any> { 

    return this.jsonApiService 
     .post('/token', user) 
     .toPromise() 
     .then((result) => { 
      // check if success, 
      // store token to localstorage, 
      // set isLoggedIn = true 
      // return new object with data about success/error   
     }) 
     .catch((error) => { 
      // handle error 
      // return new object with data about success/error   
     }); 
}