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呼叫正在进行.即使我尝试了这个链接的代码

但没用

有人可以告诉我如何使用Angular Observable避免重复的http调用吗？

Answer 1

我认为这只是误解了什么share().

当你调用this.buildings$.subscribe(...)它使ConnectableObservable由于share()操作其后面紧跟connect().

如果您在HTTP请求处于待处理状态时进行另一个订阅,它将只添加另一个Observer,ConnectableObservable并且当响应准备就绪时,它将被发送给两个Observers.但是,如果您this.buildings$要完成并在此之后再次订阅它将发出另一个HTTP请求,因为ConnectableObservable它未连接到其源.

您想要的是.publishReplay(1).refCount()(或shareReplay(1)自RxJS 5.4.0以来)重放从源发出的最后一项.您很可能还希望附加take(1)到正确完成链.