Angular 角度2，观察值-从订阅返回一些数据

我有一个登录组件和一个简单的方法：

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

---

这段代码运行良好。我得到了响应，但我想知道如何将一些数据从服务返回到组件。我不想移动subscribe to组件，因为我相信，必须在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
  });       
}

---

由于http请求是异步运行的，因此不能从lambda内部返回某些内容，但可以传递如下回调（本质上类似于subscribe）：

然后在组件中：

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

---

您可以这样做，返回一个连接到函数范围中另一个观察者的新观察者

这样，您的调用组件就可以订阅返回的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();
                });
        }
    }

---

如果您希望在

AuthService

中包含对可观察对象的订阅，并希望返回一个异步操作的结果值，那么您所寻找的似乎是一个承诺

您可以使用RxJS操作符来完成此操作。它将为您管理

订阅

（和

取消订阅

）：

登录（用户：用户）：承诺{
返回此.jsonApiService
.post（'/token'，用户）
.toPromise（）
。然后（（结果）=>{
//检查是否成功，
//将令牌存储到本地存储，
//设置isLoggedIn=true
//返回包含成功/错误数据的新对象
})
.catch（（错误）=>{
//处理错误
//返回包含成功/错误数据的新对象
});
}

您可以将数据保存在

AuthService

中，然后通过组件可以调用的get方法请求数据。您还可以使该方法成为可观察的，使您的组件订阅它。这将使

AuthService

在组件收到数据之前完成。他说，他不想这样做，并寻找另一种可能性。@user348173如果您想移动

订阅组件，则由您决定，但对于某些API，您需要在多个位置调用同一个API，并且需要对结果执行不同的操作。如果您在服务中使用了
subscribe
，您将遇到麻烦。不，您可以传递lambda（回调函数）来包含逻辑，然后在服务内部的
subscribe
中调用该逻辑：）
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();
                });
        }
    }

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