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

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 管道来显示数据。

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

Share complex objects between two independent angular (>=5) components

data-sharing

angular