Question

我有两个单独的组件，它们在给定的时间在同一视图中可见。在他们的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允许检索可观察对象发出的最后n个值。

Answer 2

如果可以通过解析器触发数据请求，则事情会更简单，但是您可以遵循先前的回答之一，即使用智能容器组件来包装需要消耗数据的组件。该智能容器可以触发http请求，但是在服务上通过点击设置一个管道以将响应值设置为BehaviorSubject，然后在需要数据的组件上使用异步管道来管理数据订阅。

以下是该服务的代码示例：

        competencesDisplayState: () => {
            var result = [];
            for (var index=0;index < this.userCompetences.competences.length;++index) {
                result(this.showCompetence.includes(index));
            }
            return result;
        }

Answer 3

NgRx 是一个用于在Angular中构建反应式应用程序的框架。 NgRx提供状态管理，副作用隔离，实体集合管理，路由器绑定，代码生成以及开发人员工具，这些工具可以增强开发人员在构建许多不同类型的应用程序时的体验。

特别是，当构建服务中包含大量用户交互和多个数据源的应用程序时，当管理服务中的状态不再足够时，您可能会使用NgRx。

点击https://ngrx.io/docs

SHARI原则是可以回答“我需要NgRx”问题的一种好物质。

共享：许多组件和服务访问的状态。
水合：从外部存储持久并重新水化的状态。
可用：需要重新输入路由时需要可用的状态。
已检索：必须具有副作用的状态。
已实施：受其他来源的操作影响的状态。

Answer 4

我已经使用1 --- Default contructor. Container<T>::Container() [with T = double] 2 --- Copy contructor. Container<T>::Container(const Container<T>&) [with T = double] 3 --- std::initializer_list contructor. Container<T>::Container(const std::initializer_list<_Tp>&) [with T = double] 4 --- std::initializer_list contructor. Container<T>::Container(const std::initializer_list<_Tp>&) [with T = double] std::initializer_list contructor. Container<T>::Container(const std::initializer_list<_Tp>&) [with T = Container<double>]和MessagingService来解决它。

消息服务：

EventEmitter

一个组件的代码：

public dashboardViewModel: DashboardViewModel;

constructor(private dashboardService: DashboardService) {}

@Output() emitDashboardViewModelData: EventEmitter<DashboardViewModel> = new EventEmitter();

getDashboardViewModelData() {
    this.dashboardService.getDashboardViewModel().subscribe(dashboardVM => {
      this.dashboardViewModel = dashboardVM;
      this.emitDashboardViewModelData.emit(this.dashboardViewModel);
    });
}

第二部分代码：

ngOnInit() {
    this.messagingService.emitDashboardViewModelData.subscribe(dashboardData => {
    this.dashboardViewModel = dashboardData;
    });
}

此代码仅进行一次服务调用，并且ngOnInit() { this.messagingService.getDashboardViewModelData(); this.messagingService.emitDashboardViewModelData.subscribe(dashboardData => { this.dashboardViewModel = dashboardData }); }发出数据时，两个组件都通过发出器获取数据

订阅同一服务呼叫，而无需在Angular 7中多次呼叫服务

4 个答案: