Подпишитесь на один и тот же сервисный звонок без звонка в сервис несколько раз за Angular 7

Question

У меня есть два отдельных компонента, которые в данный момент видны в том же виде. В их ngOnInit () - методе я подписываюсь на тот же Observable от сервиса. Это приводит к двум сетевым вызовам, которые не нужны. Как я могу поделиться ответом от службы обоим абонентам, чтобы происходил только один сетевой вызов?

Мой код вызова службы:

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

И как я подписал его на оба компонента is:

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);
    });
  }
}

и затем при вызове инициализации в ваших компонентах просто выполните:

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

ReplaySubject позволяет получить n последнее значение, испущенное наблюдаемое.

Answer 2

Если запрос данных можно инициировать с помощью распознавателя, все будет проще, однако вы можете следовать одному из предыдущих ответов об использовании компонента интеллектуального контейнера, который оборачивает ваши компоненты, которые должны использовать данные. Этот интеллектуальный контейнер может инициировать запрос http, но в службе задайте канал с помощью касания, чтобы задать значение ответа BehaviorSubject, а затем в ваших компонентах, которым требуется данные, используется асинхронный канал c для управления подписками данных.

Вот пример кода услуги:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { map, tap } from 'rxjs/operators';

@Injectable({
    providedIn: 'root',
}) export class ExampleService {

  private _data: BehaviorSubject<any> = new BehaviorSubject({ properties: [], geometry: [] });
  public data$: Observable<any> = this._data.asObservable();

  constructor(private http: HttpClient){}

  set data(data) {
    this._data.next(data);
  }

  get data() {
    return { ...this._data.value };
  }

  public getEarthquakeData(url): Observable<any[]> {
    return this.http.get<any[]>(url)
      .pipe(
        tap(
          (data: any) => this.data = data
        )
      )
  }
}

Answer 3

Мне удалось разрешить его, используя 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
    });
 }

Этот код выполняет только один сервисный вызов, и оба компонента получают данные через эмиттер, когда Messaging Service передает данные

Answer 4

NgRx является основой для создания реактивных приложений в Angular. NgRx обеспечивает управление состоянием, изоляцию побочных эффектов, управление коллекциями объектов, привязки маршрутизаторов, генерацию кода и инструменты для разработчиков, которые улучшают опыт разработчиков при создании приложений различных типов.

В частности, вы можете использовать NgRx, когда вы создать приложение с множеством взаимодействий пользователей и несколькими источниками данных, когда управления состоянием в службах уже недостаточно.

Нажмите https://ngrx.io/docs

Хорошее вещество, которое может ответить на вопрос «Нужен ли мне NgRx», это принцип SHARI:

• Shared: состояние, к которому обращаются многие компоненты и службы.

• Гидратированный: состояние, которое сохраняется и восстанавливается из внешнего хранилища.

• Доступно: состояние, которое должно быть доступно при повторном входе в маршруты.

• Извлечено: состояние, которое необходимо получить с побочным эффектом.

• Влияние: состояние, на которое влияют действия от oth источники.