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

Question

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

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

因此，我想将用户对象传递给detail组件。

通常，我只是传递路由的id，使用一个guard并使用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管道来显示数据。