Observable 同時被調用

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 來避免此調用進行兩次，因為我的組件出現兩次，同時調用 MenuService 的 getMenu。

我希望解釋清楚。

Answer 1

嘗試使用first() rxjs 運算符

Answer 2

一種方法是緩存數據，如注釋中所示。 其他更快的方法是將 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>