Службы угловой передачи данных с RxJS - PullRequest
Новая
       33

Службы угловой передачи данных с RxJS

0 голосов
/ 09 мая 2018

Я программирую приложение Angular, которое взаимодействует с REST-подобным бэкэндом.

Пользовательский интерфейс состоит из главной страницы / страницы сведений, где элемент выбирается слева, а детали отображаются справа. Использование углового маршрутизатора, розетки маршрутизатора и т. Д.

Выбираемые позиции показывают сводку деталей. Когда подробный элемент редактируется, я хочу обновить выбранный элемент обновленной информацией.

У меня есть сервис API, который использует HttpClient для получения значений из бэкэнда.

api.service.ts 

public getAllItems(): Observable<Item[]> {
return this.http.get<Item[]>(this.apiUrl + '/items')
  .map(response => {
    return response.map((item) => new Item(item));
  });
}

У меня также есть служба данных, которая в настоящее время просто возвращает наблюдаемое из службы API.

предметы-data.service.ts 

get items$(): Observable<Item[]> {
  return this.api.getAllItems();
}

Главный (левый) компонент просто регистрирует наблюдаемую службу данных.

Пункт-master.component.ts 

data$: Observable<Item[]>;

constructor(private itemsDataService: ItemsDataService) { }

ngOnInit() {
  this.data$ = this.itemsDataService.items$;
}

Шаблон использует асинхронный канал и выполняет итерацию массива для отображения сводки.

Пункт-master.component.html 

<div *ngIf="(data$ | async) as data">

При использовании этого метода выбираемый элемент не обновляется автоматически при обновлении элемента в приложении.

Теперь я рассматриваю возможность изменения службы данных таким образом, чтобы у меня был внутренний субъект, который можно наблюдать. Когда обновление выполняется с помощью метода в службе данных, я могу вызвать subject.next (), чтобы сообщить об изменении. НО это приложение одновременно используется другими людьми на других машинах / в браузерах.

В идеале я хотел бы повторно получить данные из бэкэнда, но субъект будет эффективно действовать как «кеш», вызывая только первый вызов API. Как наиболее эффективно убедиться, что я получаю самые последние данные из серверной части, а также получаю обновления от изменений, внесенных локально?

1 Ответ

0 голосов
/ 09 мая 2018

Если я правильно понял ваш вопрос, я изменю сервис на что-то вроде этого (это очень схематичное описание): 

items$: Observable<Array<Item>>;

currentItemId$ = new Subject<String>();

currentItem$: Observable<Item> = this.currentItemId$.map(<your fetch code>);

loadItem(itemId) {
  this.currentItemId$.next(itemId);
}

Каждый раз, когда вы щелкаете по элементу в главном представлении, он вызывает метод loadItem(), который извлекает определенное значение и передает его в currentItem$.

Это дает вам более сервис-ориентированный (с магазином) подход, то есть вы говорите ему загружать элемент и потреблять его в видимой области наблюдения

...