Angular 使用行为主体和 http 客户端答案

【问题标题】：Angular use behavior subject and http clientAngular 使用行为主体和 http 客户端
【发布时间】：2021-02-20 18:07:46
【问题描述】：

在我的应用程序中，我使用行为主题。我有一项服务可以进行 http 调用并将结果放入我的行为主题中

我的服务：

  data$ = new BehaviorSubject({
      users: []
  });

  getUsers(){
      this.http()
      .subscribe((users: any) => {
          this.data$.next({...this.data$.value, users: users});
      });
  }

我在我的页面上调用此服务，但不调用 Oninit 方法。我在页面中子组件的 emi 事件期间触发了这个调用

我的页面：

export class UserListComponent implements OnInit {
  users$ = new BehaviorSubject(null);
  
  constructor(private userService: UserService) { }

  ngOnInit(): void {}
  
  getUsers(event) {
    this.userService.getUsers();
    this.users$ = this.userService.data$;
  }

将结果传递给我的子组件：

    <app-table [config]="config" [entity]="(users$| async)?.users" 
 (onDataChange)="getUsers($event)"  class="row col-md-12">
    </app-table>

我的问题是结果没有传递给我的子组件。然而我在我的父组件中恢复得很好

另一方面，如果我在 onInit 中从头加载数据，这些数据已传递给子组件

【问题讨论】：

能告诉我this.http()是什么吗？
在哪里发出 onDataChange？什么时候？
this.http 是我对我的 api 的 http 调用
onDataChange 在我的子组件（comp-table）中发出。它在此组件中出现更改时设置（例如从储藏室加载用户首选项），在表格中显示下一页
我想保留我当前的架构并使用行为主题。此外，在我的组件和我的服务之间，我有一个调度程序。是他通过根据动作调用正确的服务来返回我的主题行为。我不调用我的 directemnet 服务

标签： angular typescript http components behaviorsubject

【解决方案1】：

你可以像这样让它更简单。

class service ... {
   private data$ = new BehaviorSubject();

   getData() {
      return data$.asObservable(); 
   }

   setData(users[]: users) {
      this.data$.next(users);
   }

}

在组件中你可以订阅它或者像你已经拥有的那样直接在模板中使用。

class component .. {
  users$: BehaviorSubject;
  constructor (private service: Service) {
  }

  ngOnInit(){
    this.users = this.service.gatData();
  }

 onDataChange(users) {
    this.service.setData(users);
 }
}

【讨论】：

我想保留我当前的架构并使用行为主题。此外，在我的组件和我的服务之间，我有一个调度程序。是他通过根据动作调用正确的服务来返回我的主题行为。我不调用我的 directemnet 服务
Plus data$ 由几部分组成：用户列表、用户详细信息...

【解决方案2】：

我认为您的数据没有到达子组件的原因是您在初始化后设置了 users$ 主题。发生更改时不会触发异步管道。

在我看来，更被动的方法应该是这样的：

服务：

export class UserService {
    refreshData$ = new Subject();
    data$ = this.refreshData$.pipe(
        switchMap(() => this.yourHttpCall())
    );
}

组件：

export class UserListComponent implements OnInit {
    users$;
  
    constructor(private userService: UserService) { }

    ngOnInit(): void {
      this.users$ = this.userService.data$;
    }
  
    getUsers(event) {
      this.userService.refreshData$.next();
    }
}

【讨论】：