Angular 8 中使用服务数据的最佳做法是什么？

Question

我有一个应用程序，所有状态管理架构都是作为 Observable Data Services 实现的。我想弄清楚的是，创建可通过服务使用的共享列表和词典的最佳方式是什么。我知道这听起来很简单 - 但由于我是 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);
     
    });
  }
}

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

Answer 1

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

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

angular 团队维护了一个名为 Tour of heroes, where they provide developers with a great intro to the angular architecture and its main data workflows. I specially recommend people to finish the 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>

Angular 8 中使用服务数据的最佳做法是什么？

What is the best practice in Angular 8 to consume data from service?

rxjs

angular

angular8