Совместное использование сложных объектов между двумя независимыми угловыми (> = 5) компонентами - PullRequest
Новая
       23

Совместное использование сложных объектов между двумя независимыми угловыми (> = 5) компонентами

0 голосов
/ 03 сентября 2018

У меня есть компоненты, которые отображают список пользователей (UserListComponent) Модель, связанная с моделью, представляет собой список пользовательских объектов, полученных пользовательской службой с использованием httpclient.

Когда пользователь нажимает на элемент (пользователя) в списке, компонент (UserDetailsComponent) должен открываться, где можно редактировать пользователя.

Поэтому я хочу передать пользовательские объекты компоненту детализации.

Обычно я просто передаю идентификатор маршрута, использую охрану и загружаю весь пользовательский объект по этому идентификатору, используя userService.

В моем особом случае нам не нужен бэкэнд-вызов и мы передаем объект как есть без бэкэнд-вызова.

Каков наилучший способ сделать это? Еще один общий сервис?

1 Ответ

0 голосов
/ 03 сентября 2018

Вы можете использовать тот же UserService, который вы уже используете. Похоже, вы просто хотите, чтобы он загружался один раз во время экземпляра приложения (или, может быть, когда есть кнопка принудительного обновления?). В любом случае, вы можете сделать что-то вроде этого: 

@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 в шаблонах.

...