Angular 8 中使用服务数据的最佳实践是什么？答案

【问题标题】：What is the best practice in Angular 8 to consume data from service?Angular 8 中使用服务数据的最佳实践是什么？
【发布时间】：2021-08-08 20:23:19
【问题描述】：

我有一个应用程序，所有状态管理架构都实现为可观察数据服务。我想弄清楚的是创建可通过服务使用的共享列表和字典的最佳方式是什么。我知道这听起来很简单——但由于我是 Angular 8 的新手——我仍然无法理解 rxjs 的所有最佳实践。

为了说明我的问题 - 这是一个服务，一个用户列表，我想一次性使用数据（作为单例）并能够通过组件轻松获取它

export class ApiService {

 public users =  new BehaviorSubject<any>({‘users’: []});

 constructor(private http: HttpClient}

 public getUsers(){
   return this.http.get(‘/users’).subscribe((res)=>{this.users.next(res)})
 }
}

这是我使用用户列表的方式

export class UsersComponent implements OnInit {

public usersList: BehaviorSubject<any>;

  constructor(public apiService:ApiService) {

    this.usersList = new BehaviorSubject<any>([]);
    this.apiService.users.subscribe((value: any) => {
           
      this.usersList.next(value);
     
    });
  }
}

现在，我不确定这是不是正确的方式 - 因为逻辑似乎在组件和服务中重复......（我在这里可能错了......）只是为了详细说明 - 用户列表应该是一个应该只实例化一次的静态数据。

【问题讨论】：

组件中不需要BehaviorSubject。只需使用您从this.apiService.users 引用的那个。

标签： angular rxjs angular8

【解决方案1】：

关于如何在 Angular 中处理组件之间的数据的答案是：使用服务

https://angular.io/guide/architecture-services

Angular 团队维护了一个名为 Tour of heroes 的非常好的教程，他们在其中为开发人员提供了关于 Angular 架构及其主要数据工作流程的精彩介绍。我特别推荐大家完成last chapter，这是关于数据处理的。

总而言之，要回答您的问题，您不应该从服务订阅对端点的调用。在您的服务中，创建如下函数：

...
public getUsers(){
   return this.http.get(‘/users’)
 }
...

在您的组件中，您为服务数据创建Observables，如下所示：

export class UsersComponent implements OnInit {
...
public usersList$ = this.apiService.getUsers();

...
}

在其组件模板上（注意那里的async pipe），当您使用适当的管道时，angular 将为您进行订阅：（我假设您的用户模型上有名称和电子邮件属性，只是为了显示数据）

<div *ngFor="let user of usersList$ | async">
  <div> {{ user.name }} </div>
  <div> {{ user.email }} </div>
</div>

【讨论】：