我建立一个应用程序，我需要一点指导方面的应用程序结构和逻辑我非常感谢任何帮助！
因此，在应用程序中，我调用服务器并从那里获取文档（包裹），现在我想尽可能减少调用的数量，因为我认为这将提高我的应用程序性能。我对吗？我将获取所有文档，然后做任何过滤/拼接或任何需要在客户端每次包裹被删除等，我尝试了服务器端处理（例如，服务器端删除包裹，并在删除后返回更新的包裹数组）但这相当慢，因为包裹数组相当大，并且调用mongoDB，因此也需要时间（特别是非“onstock”的）。所以我的想法是在服务初始化后立即调用API并存储包裹（并且还存储另一个数组，其中只包含库存的包裹）在Subjects中。但是我有一个问题，
1.我不知道如何显示错误/加载屏幕以获得适当的用户体验，因为我的API调用是在服务中，所以我厌倦了创建一个表示加载状态的主题（我在组件中使用它来显示加载微调控制器），但现在我还需要一个表示错误状态的主题（如果API调用有错误，我想将其显示给用户），这变得很麻烦，
2.in 该服务将有更多的方法，他们将不得不操纵包裹主题以及，所以我想知道我是否应该订阅在一个顶级组件，并钻取主题内的子组件或我可以只订阅子组件多次，它不会影响性能？
对不起，因为我缺乏最佳实践知识的长职位。
服务代码：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject} from 'rxjs';
import { Parcel } from 'src/app/models/Parcel.model';

@Injectable({
  providedIn: 'root',
})
export class ParcelsService {
  apiUrl: string = 'http://localhost:5000';

  allParcels$ = new BehaviorSubject<Parcel[]>([]);
  stockParcels$ = new BehaviorSubject<Parcel[]>([]);
  isLoading$ = new BehaviorSubject<boolean>(true);

  constructor(private http: HttpClient) {
    this.http.get<Parcel[]>(`${this.apiUrl}/parcels`).subscribe((response) => {
      this.allParcels$.next(response);
      this.stockParcels$.next(
        response.filter((parcel) => parcel.isOnStock === true)
      );
    });
    this.isLoading$.next(false)
  }



}

当前使用主题的唯一组件（将有更多）

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ParcelsService } from 'src/app/services/parcels/parcels.service';
import { Parcel } from 'src/app/models/Parcel.model';
import { Subject, Subscription, takeUntil } from 'rxjs';

@Component({
  selector: 'app-parcels-management-page',
  templateUrl: './parcels-management-page.component.html',
  styleUrls: ['./parcels-management-page.component.css'],
})
export class ParcelsManagementPageComponent implements OnInit, OnDestroy {
  private ngUnsubscribe = new Subject<void>();

  isFetching = true;
  allParcels: Parcel[] = [];
  stockParcel: Parcel[] = [];

  constructor(private parcelsService: ParcelsService) {}

  ngOnInit(): void {
    this.parcelsService.isLoading$
      .pipe(takeUntil(this.ngUnsubscribe))
      .subscribe((response) => {
        this.isFetching = response;
        console.log(this.isFetching);
      });

    this.parcelsService.allParcels$
      .pipe(takeUntil(this.ngUnsubscribe))
      .subscribe((response) => {
        this.allParcels = response;
        console.log(this.allParcels);
      });
    this.parcelsService.stockParcels$
      .pipe(takeUntil(this.ngUnsubscribe))
      .subscribe((response) => {
        this.stockParcel = response;
        console.log(this.stockParcel);
      });
  }

  ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }
}