angular - 同时调用的 Observable

问题描述

我的应用程序中有一个组件存在于两个不同的地方。该组件有一个依赖项，即一项服务，它通过 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。

我希望解释清楚。

标签： angularrxjshttpclient

一种方法是缓存数据，如注释中所示。其他更快的方法是将 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>

angular - 同时调用的 Observable

问题描述

解决方案

推荐阅读