时间戳

首页 > 解决方案 > 重新触发服务调用以重复异步请求

angular - 重新触发服务调用以重复异步请求

问题描述

想象一下 Angular 组件中显示的用户列表。我注入我的服务并在我的模板中订阅它。

我还有一个对话框，您可以在其中将用户添加到我的表中。添加并关闭我的对话框后，我想通过重新触发服务调用来刷新表。

零件：

export class UserComponent implements OnInit {
  public users$!: Observable<User[]>;

  constructor(
    public dialog: MatDialog,
    private userService: UserService,
  ) {}

  public ngOnInit() {
    this.users$ = this.userService
      .getAllUsers$()
      .pipe(take(1));
  }

  public openAddUserDialog() {
    this.dialog
      .open(AddUserDialogComponent)
      .afterClosed()
      .subscribe(() => {
        // TODO re-trigger observable here?
      });
  }
}

模板：

<p *ngFor="user of users$ | async">{{ user.name }}</p>

如何afterClosed()从对话框中重新触发函数中的服务调用？我不想在我的订阅中订阅这个。

我相信必须有一种模式可以将 的返回值getAllUsers$()与另一个 Observable 结合起来，然后在那里推送一些东西，然后重新触发该过程。

标签： angulartypescriptrxjsangular-material

解决方案

不知道这是否是最佳做法，但你可以试试这个：

export class UserComponent implements OnInit {
  public users$!: Observable<User[]>;

  constructor(
    dialog: MatDialog,
    private userService: UserService,
  ) {}

  ngOnInit() {
    this.getUsers();
  }

  openAddUserDialog() {
    this.dialog
      .open(AddUserDialogComponent)
      .afterClosed()
        .pipe(
          filter(user => !!user), // Avoid closing modal without creating a new user
          tap(() => this.getUsers()))
      .subscribe();
  }

  getUsers() {
    this.users$ = this.userService
      .getAllUsers$()
      .pipe(take(1));
  }
}

推荐阅读