理解RxJS行为主题

Question

我们尝试使用BehaviorSubject跨多个组件共享API数据。在我的组件上，我触发一个HTTP请求，并在返回响应后更新主题。

组件技术

onClick() {
    this.service.getCompanies();
    this.service.companiesList$.subscribe(companies => {
        console.log(companies.length); // 0 and then 1
    });
}

服务台

companiesList$ = new BehaviorSubject([]);

getCompanies() {
    return this.http.get(myUrl).subscribe((res: any) => {
        this.companiesList$.next(res.data);
    });
}

请求完成后，如何仅访问行为主体的最后发出的值？

Answer 1

要获得最后一个发射值，请使用：

公司列表$.getValue（）。

如果要在流中使用它，请使用withLatestFrom操作符

Answer 2

从技术上讲，您可以使用companiesList$.getValue（），但我建议不要使用subscribe（），而是使用AsyncPipe（参考）。可能是这样的：

组件技术

companies$ = this.service.companiesList$.asObservable();

onClick() {
  this.service.getCompanies();
}

component.html

<div *ngIf="companies$ | async as companies">
  <!-- your stuff -->
  {{ companies.length }}
</div>

Answer 3

也许您可以尝试以下操作，将http请求的可观察性保存在服务中，并对其应用shareReplay（1）操作符。然后，在您的组件中，您可以按如下方式使用它：

组件技术

onClick() {
    this.service.getCompanies().subscribe(companies => {
        console.log(companies);
    });
}

服务台

$companies =  this.http.get(myUrl).pipe(shareReplay(1));

getCompanies() {
    this.companies$;
}