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

Question

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调用吗？

Answer 1

我认为这只是对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)以正确完成链。