时间戳

首页 > 解决方案 > 在两个活动组件之间共享单个 API 调用的 Angular 最佳实践

angular - 在两个活动组件之间共享单个 API 调用的 Angular 最佳实践

问题描述

我试图弄清楚以下情况的最佳做法是什么：

我有两个组件 A 和 B，它们都集成在一个页面上。两个组件都需要访问数据集 C。数据集 C 由服务器的 API 调用接收。它应该只在最初接收，而不是每个组件都接收两次。

我的第一种方法是使用 observables，但随后 API 调用执行了两次。所以我切换到 BehaviourSubjects，但是当从控制器调用时，初始值当然是 null。所以我用ReplySubjects替换了它，它工作正常。但我正在为最初的电话而苦苦挣扎。我让它工作正常，但我正在寻找最佳实践。这是代码：

组件 A 和 B 相似

getDataC(): void {
    this.dataCService.getData().subscribe(data=>{this.data = data})
}

我也想在我的服务中拥有数据，所以我可以使用对象对 API 进行更新，以修改服务器上的数据。我的方法运行良好，但我不确定我是否必须在我的服务中订阅这个变量或保持它干净。

然后我的服务：

import { Injectable } from '@angular/core';
import { DataCAPIService } from '../resources/resources.service'
import { Observable, of, BehaviorSubject, ReplaySubject } from 'rxjs';

@Injectable({
    providedIn: 'root'
})
export class DataCService {


    public dataC = new ReplaySubject<any>(1)
    dataCInsideService: any

    constructor(private dataCAPIService: DataCAPIService) {

    }


    getDataCAPICall() {
        if (this.dataC.observers.length < 2)
            this.dataCAPIService.getAll({}).subscribe(data => {
                this.dataC.next(data);
                this.dataC.subscribe(data => this.dataCInsideService = data)
            })
    }

    getData() {
        this.getDataCAPICall();
        return this.dataC;
    }


    saveDataC() {
        this.dataCAPIService.update(this.dataCInsideService, {}).subscribe(data => {
            this.dataC.next(this.dataCInsideService);
        })
    }
}

感谢您对更好的风格提出任何意见或解决方案。

标签： angular

解决方案

我有两个组件 A 和 B，它们都集成在一个页面上。两个组件都需要访问数据集 C。

只要它们在一页中使用，为什么要从每个组件中调用它们？我认为您可以从页面组件中调用它并将其发送给孩子。

孩子们可以使用@Input()装饰器获取数据。您可以直接发送数据，也可以将其作为 observable 发送（如果是行为主题或主题就可以）。

我希望这可以帮助你。

推荐阅读