Angular2可观察到的共享不起作用

原文 标签 angular rxjs observable angular2-services rxjs5

Angular2 Observable共享无法正常工作,重复的http调用正在进行

BuildingService.ts

@Injectable()
export class BuildingService {

constructor(private http: Http){       
  }

buildings$: Observable<Building[]>;
this.buildings: Building[];

getData() : Observable<Building[]>{
     this.buildings$ = this.http.get('http://localhost:8080/buildings').share().map(this.extractData);
     this.buildings$.subscribe(buildings => this.buildings = buildings);
     return this.buildings$;
  }

 private extractData(res: Response) {
    let body = res.json();
    return body;
} 

}

component1.ts
export class component1 {
constructor( private  buildingService: BuildingService) {}

this.subscription = this.buildingService.getData()
            .subscribe(buildings => console.log(buildings),
            error =>  this.errorMessage = <any>error);
}

component2.ts
export class component2 {
constructor( private  buildingService: BuildingService) {}

this.subscription = this.buildingService.getData()
            .subscribe(buildings => console.log(buildings),
            error =>  this.errorMessage = <any>error);
}

共享不起作用,正在进行多个HTTP调用。即使我尝试了this link的代码

但没有用。

有人可以让我知道如何使用Angular Observable避免重复的http调用吗?

最佳答案

我认为这只是对share()的误解。

当您调用this.buildings$.subscribe(...)时,由于使用ConnectableObservable运算符,所以它会生成一个share(),后面紧跟着connect()

如果在HTTP请求挂起时进行另一个订阅,它将仅将另一个Observer添加到ConnectableObservable中,并且当响应准备就绪时,它将被发送到两个Observer。但是,如果让this.buildings$完成,然后再次订阅,则它将发出另一个HTTP请求,因为ConnectableObservable未连接到其源代码。

相反,您需要的是.publishReplay(1).refCount()(或自RxJS 5.4.0起的shareReplay(1)),可重播从源发出的最后一项。您很有可能还希望附加take(1)以正确完成链。

关于Angular2可观察到的共享不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41440923/

相关文章:

javascript - 使用 RxJS 从订阅中返回一个 Observable

rxjs - 从 Observable 复制到 Observer

F# Observable - 将事件流转换为列表

c# - 根据输入序列的元素将 IObservable<T> 转换为另一个错误或完成的序列

angular - Firebase - 如何检测/观察 Firebase 用户何时验证他们的电子邮件,如 onAuthStateChanged

angular - 使用httpClient的post方法在URL中传递参数

javascript - 取消订阅AsyncSubject?

angular - 在Angular 4中通过另一个的响应调用另一个可观察的对象

javascript - 订阅angular2之前先过滤Observables

angular - 在 Angular 2 及更高版本中访问 Azure Web 应用程序设置的最佳方法