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

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

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

因此，我希望将用户对象传递给详图构件

通常，我只需要传递一个路由id，使用一个守卫，然后使用userService通过该id加载整个用户对象

在我的特殊情况下，我们不需要后端调用并按原样传递对象，而不需要后端调用

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

您可以使用已经在使用的相同用户服务。听起来您只是希望在应用程序实例中或在有强制刷新按钮时加载一次？。无论如何，你可以这样做：

@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) {}
}

---

请注意，这是未经测试的代码，但您可能已经了解了这一点。只需将所有内容保持为可观察内容，并使用路由器更新可观察内容即可。您应该在模板中使用异步管道来显示数据。

当用户打开列表组件时，始终会加载用户列表。当用户单击列表项时，应在用户详细信息组件中使用基础用户对象。整个用户列表项不应该缓存在服务中，因为它应该是无状态的，并且用户列表被多次加载。只有列表组件和详细信息掩码之间的导航不应导致后端调用，而应使用列表中提供的对象