在两个独立的角度 (>=5) 组件之间共享复杂对象答案

【问题标题】：Share complex objects between two independent angular (>=5) components在两个独立的角度 (>=5) 组件之间共享复杂对象
【发布时间】：2018-09-03 15:42:50
【问题描述】：

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

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

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

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

在我的特殊情况下，我们不想要后端调用并在没有后端调用的情况下传递对象。

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

【问题讨论】：

标签： angular data-sharing

【解决方案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 管道来显示数据。

【讨论】：

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