在路由之间传递从 API 检索到的数据的最佳方式

Question

所以我想知道什么是将从 API 端点检索到的数据传递到另一个组件而无需再次请求数据的最佳方式？因此，据我所知，我可以使用两个组件之间共享的服务来做到这一点，但我应该什么时候将数据存储在服务中？在这种情况下，最佳做法是什么？

Answer 1

如果您需要在多个组件之间共享数据，您应该使用服务，正如您已经说过的。

但是您不应该将数据存储在组件中。该服务应负责请求和存储数据。

每个组件都会向服务请求数据。该服务将执行实际的 HTTP 调用或 return 来自其本地缓存的数据。为此，请确保您有一个服务实例（即在 app.module 中将其注册到提供商部分）。

Answer 2

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

当数据发生变化时，您可以在多个组件中订阅此 observable，数据将在所有订阅的组件之间共享

注：

不要忘记在组件 OnDestroy 中取消订阅

在路由之间传递从 API 检索到的数据的最佳方式

Best way to pass data retrivied from API between routes

angular-routing

angular-services

angular