Лучший способ передавать данные, полученные из API, между маршрутами

Question

Итак, мне интересно, как лучше всего передать данные, полученные из конечной точки API, в другой компонент без повторного запроса данных? Итак, насколько я понимаю, я могу сделать это с помощью службы, совместно используемой двумя компонентами, но когда мне следует хранить данные в службе? И что лучше всего в этом случае?

Answer 1

Импортировать BehaviorSubject в служебный файл (например: ApiProvider.ts)

import { Subject } from 'rxjs/Subject';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

Созданы Необходимые переменные

  public  dataSource = new BehaviorSubject(null);
  public dataSourceChanges$ = this.dataSource.asObservable();

После получения ответа API вызовите метод ниже. Это отправит данные для компонентов, которые когда-либо подписывались

 changeInDatatatus(data:any): void {
    this.selectedNetworkSource.next(data);
  }

И в компоненте OnInit

 this.dataSubscription = this.ApiProvider.dataSourceChanges$.subscribe(
      (apiData) => {
        
        if (apiData) {

        assign to your component local variable
          this.componenetLocalvar = apiData;
        }
      });

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

Примечание:

Не забудьте отказаться от подписки в компоненте OnDestroy

Answer 2

Если вам нужно обмениваться данными между несколькими компонентами, вы должны использовать службу, как вы уже сказали.

Но вы не должны хранить данные внутри компонентов. Служба должна отвечать за запрос и хранение данных.

Каждый компонент будет запрашивать данные в службе. Служба выполнит фактический HTTP-вызов или вернет данные из своего локального кеша. Чтобы это работало, убедитесь, что у вас есть единственный экземпляр службы (ie в app.module зарегистрируйте его в разделе поставщиков).