Question

我是RxJS的新手，我正在尝试订阅两个不同的可观察函数，我想知道是否有一种方法可以从其中一个函数触发调用，也可以更改第二个文件中的结果。 / p>

我有一个动作创建者，authGuard订阅了我的loginService，我正在尝试一旦我从auth guard中调用登录功能，动作创建者就会触发。

action.js

    this.loginService.handleLogin(userId)
      .subscribe((data) => {
         console.log("response in action.js", response);
      },
      (e) => {
        console.log(e);
      });

authGuard.js

    this.loginService.handleLogin(userId)
      .subscribe((response) => {
        console.log("response in authGuard.js", response);
      }, (err) => {
        console.log("error", err);
      })

loginService.js

    handleLogin(userId) {
      const url = `api/user/${userId}`;
      return this.http.get(url, { headers: this.headers })
        .map((response: Response) => {
          return response.json();
        })
        .catch((e) => {
          return Observable.throw(e);
        });
    }

期望：

当我从任一文件调用loginService的handlLogin函数时，我希望得到console.logs结果在action.js和authGuard.js中。

Answer 1

每次调用handleLogin时，都会创建并返回一个单独的observable。所以你的两个文件没有订阅同一个对象。

请看一下这里的答案，了解如何构建handleLogin实现来解决此问题：What is the correct way to share the result of an Angular Http network call in RxJs 5?。请特别注意这个关于shareReplay()的答案，这可能是最新的答案，尽管它不是最高得分：https://stackoverflow.com/a/43943217/518955

Answer 2

HTTP observable为每个订阅者发出HTTP请求。要为多个观察者共享单个HTTP请求，您需要share运算符。

   export class FetchService {
    data$: Observable<any>;

    constructor(){
        this.data$ = this._http.request(this._url)
            .map((res:Response)=>res.json())
            .catch(this.errorHandler)
            .share();
    }

    getData(){
        return this.data$;
    }
}

现在多个观察者将共享相同的观察者。

此运算符是发布的专门化，它创建了一个当观察者的数量从零变为1时的订阅与所有后续观察者共享该订阅，直至该订阅观察者数量返回零，此时订阅处置。

RxJS在两个不同的文件中订阅了observable

2 个答案: