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

时间:2020-08-05 07:58:01

标签: angular angular-routing angular-services

所以我想知道从API端点检索到的数据传递到另一个组件而不再次请求数据的最佳方法是什么?因此,据我了解,我可以使用两个组件之间共享的服务来执行此操作,但是何时应在服务中存储数据?在这种情况下,最佳做法是什么?

2 个答案:

答案 0 :(得分:0)

如果您需要在多个组件之间共享数据,则应该使用服务,就像您已经说过的那样。

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

每个组件都将向服务请求数据。该服务将执行实际的HTTP调用或从其本地缓存中返回数据。 为此,请确保您具有该服务的单个实例(即在app.module中将其注册在providers部分中)。

答案 1 :(得分:0)

导入行为取决于服务文件(例如: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中退订