Наблюдаемое называется одновременно

Question

У меня есть компонент, который присутствует в моем приложении в двух разных местах. У этого компонента есть одна служба, которая извлекает ваши данные по http-вызову.

Я не хочу, чтобы эта служба выполняла два http-вызова, но только один.

Это мой компонент :

export class MenuFrontComponent {
  menu: any;
  constructor(private router: Router, public l: LanguageService, private _menu: MenuService) {
    this._menu.getMenu().subscribe((menu) => {
      this.menu = menu;
    });
  }

Это мой сервис:

constructor(private client: ClientService, public l: LanguageService) {
    this.client.getMenu(this.l.getLang).subscribe(data => {
      this.menu = data;
    });    
  }

  getMenu(): any {
    return new Observable(observer => {
        let int = setInterval(()=>{
          if(this.menu){
            observer.next(this.menu);
            observer.complete();
            clearInterval(int);
          }
        }, 200);
    });
  }

Я использую setInterval, чтобы избежать выполнения этого вызова два раза, потому что мой компонент, присутствующий два раза, вызывает на в то же время, getMenu от MenuService.

Я надеюсь объяснить хорошо.

Answer 1

Одним из способов является кэширование данных, как показано в комментариях. Другим более быстрым способом было бы переместить HTTP-вызов в родительский компонент и отправить ответ в качестве входного свойства дочернему компоненту.

Служба

constructor(private client: ClientService, public l: LanguageService) { }

getMenu(): any {
  return this.client.getMenu(this.l.getLang);
}

Родительский компонент

export class AppComponent {
  menu: any;

  constructor(private _menu: MenuService) {
    this._menu.getMenu().subscribe((menu) => {
      this.menu = menu;
    });
  }
}

Дочерний компонент

import { Component, Input } from '@angular/core';

export class MenuFrontComponent {
  @Input() menu: any;

  constructor(private router: Router, public l: LanguageService, private _menu: MenuService) { }
}

Шаблон родительского компонента

<app-front-component [menu]="menu"><app-front-component>
<app-front-component [menu]="menu"><app-front-component>

Answer 2

Попробуйте использовать оператор first() rx js