angular - 订阅相同的服务调用而无需在 Angular 7 中多次调用服务

Question

我有两个独立的组件，它们在给定时间在同一 View 中可见。在他们的 ngOnInit() 方法中，我从服务订阅了相同的 Observable。这会导致两次不必要的网络调用。我如何才能将服务的响应共享给两个订阅者，以便只发生一个网络调用？

我的服务调用代码是:

getDashboardViewModel (): Observable<DashboardViewModel> {
return this.get<DashboardViewModel>(Constants.DashboardApiUrl);

我在这两个组件上订阅它的方式是:

ngOnInit() {
   this.dashboardService.getDashboardViewModel().subscribe(dashboardVM => this.dashboardViewModel = dashboardVM);
}

我怎样才能使网络调用只发生一次并且两个组件都获得数据。我正在使用 Angular 7。

Answer 1

你可以这样做:

@Injectable()
export class Service{
  dashboardModel: ReplaySubject<Model> = new ReplaySubject<Model>'
  constructor(private _http: HttpClient) {
    this._http.get<Model>(url).subscribe((model: Model) => {
      this._dashboardModel.next(model);
    });
  }
}

然后在您的组件中调用 init 时只需执行以下操作:

this._service.dashboardModel.first().subscribe((model) => {});

ReplaySubject 允许检索 observable 发出的最后一个值。