Как увлажнять объекты?

Question

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

По сути, у меня есть 2 объекта, извлеченные из разных исходных файлов:

Foos

{
   id: 1,
   name: "Foo1",
   bars: [ 1, 2, 3 ]
}

Bars

 {
    id: 1,
    name: "Bar1"
 }

Я пытаюсь отобразить список каждого на отдельной странице. Но мне нужно перечислить имена Bars на странице Foos.html и имена связанных Foos на странице Bars.html.

Полагаю, есть два возможных решения:

• Поиск в пользовательском интерфейсе
• Гидрат в Сервисе

Мой тип Foo выглядит так:

{
    id: number;
    name: string;
    bars: Bar[];
}

В неангулярном мире, я считаю, что правильный способ сделать это был бы в Службе (или, скорее, через какой-то контроллер). Я пытался реализовать это на уровне обслуживания, но я изо всех сил пытаюсь понять, как я мог бы сделать это с помощью двух запросов? Особенно учитывая, что обычно Angular HttpClient автоматически преобразуется в сильный тип Foo.

Использую ли я здесь неправильный подход? Я не вижу никаких упоминаний о Controllers в Angular2 +, поэтому я что-то здесь упускаю?

Answer 1

Я думаю, ваш инстинкт, что это не «угловая» проблема, верен.Сегодня я бы сказал, что это скорее проблема RxJS.Вам нужно сделать два запроса и поместить данные из второй полезной нагрузки в первую, а затем вернуть эту объединенную полезную нагрузку.

На языке RxJS, который сводится к чему-то вроде этого:

import { HttpClient } ...

const stream_1$ = this.http.get ( 'url_1' );
const stream_2$ = this.http.get ( 'url_2' );

stream_1$.pipe ( 
    switchMap ( x => { 
       // x will be the result of the first stream, 
       // you are literally switching to the second stream
       return stream_2$.pipe ( 
          map ( y => { 
            // y will be the result of the second stream. 
            // So you want to combine x, and y. 
            // Do your hydration here
            return ( { some transformed object using x + y data } );
          } )
    } )
).subscribe ( x => // result will be that combined object )

Вот как вы сейчас поступаете с такими вещами, довольно стандартным шаблоном RxJS.Возможно, вы захотите взглянуть на различные операторы, mergeMap и так далее, но общий смысл - это то, что я изложил выше.