Question

我有一个显示用户列表的组件（UserListComponent）模型绑定模型是userService使用httpclient接收的用户对象的列表。

当用户单击列表中的项目（用户）时，组件（UserDetailsComponent）应打开编辑用户的位置。

因此，我想将用户对象传递到详细信息组件。

通常，我只是传递路由的ID，使用防护，并使用userService通过该ID加载整个用户对象。

在我的特殊情况下，我们不希望进行后端调用，而无需进行后端调用即可传递对象。

最好的方法是什么？另一个共享服务？

Answer 1

您可以使用已经使用的相同UserService。听起来就像您只希望它在App实例期间加载一次（或当有强制刷新按钮时？）。无论如何，您可以执行以下操作：

@Injectable()
export class UserService {

  readonly users: Observable<User[]> = this.http.get('https://some.url/users).pipe(
    shareReplay()
  );

  readonly user: Observable<User | undefined> = this.route.params.pipe(
    map(({ user }) => user),
    mergeMap((userId) =>
      userId ? this.users.pipe(
        map((users) => users.find((user) => user.id === userId))
      ) : of(void 0)
    )
  )

  constructor(readonly http: HttpClient, readonly route: ActivatedRoute) {}
}

请注意，这是未经测试的代码，但是您可能会明白。只需将所有内容保持为可观察对象，然后使用路由器更新可观察对象即可。您应该使用模板中的async管道来显示数据。

在两个独立的角度（> = 5）分量之间共享复杂的对象

1 个答案: