Объедините две наблюдаемые внутри цепочки pipe () - PullRequest
Новая
       80

Объедините две наблюдаемые внутри цепочки pipe ()

0 голосов
/ 06 мая 2020

Я использую Rx js, и я хочу создать Observable из следующего шаблона (в порядке):

  1. получить параметры из paramMap $, затем ...

  2. на основе значения params, получить оба (getData (): Observable, getCategories (): Observables) вместе, затем ....

  3. из ([данные, категории]) создать окончательный объект.

Код будет выглядеть так: 

//route = this.ActivatedRoute

let obs$ = route.paramMap.pipe(

// combineLatest() is not a pipable operator, so it shouldn't be used inside .pipe()
// also it doesn't accept a function,
// but this just to show you what I want to do.

combineLatest(params=>getData(params.id), params=>getCategories(params.id)),

map(([data, categories])=>{
//do some changes...
return {data,categories}
}
)
)

также где лучше всего разместить поместите этот код в проект Angular:

  • constructor() - не лучшая практика, потому что это длительная операция (на самом деле она должна выполнять запросы API)

  • ngOnInit() не рекомендуется, потому что в какой-то момент мне нужно изменить this.params, который используется в шаблоне 

...
combineLatest(params=>
   getData(params.id).pipe(
        map(data=>{
            this.params.type=data.type; 
            return data
           })), 
   params=>getCategories(...) 
)

в шаблоне : 

<div>{{params.type}}</div>

1 Ответ

2 голосов
/ 06 мая 2020

Для передачи Observable после получения параметров вы можете использовать switchMap и вернуть forkJoin() изнутри. 

this.route.paramMap.pipe(switchMap((params) => {
    return forkJoin(getData(params.id), getCategories(params.id));
}));

Я считаю, что подписавшись на Observable, выполняя запросы API, все должно в идеале от go до ngOnInit(), если только у вас нет очень специфических требований c, когда вы не хотите, чтобы эти подписки при загрузке компонента.

Что касается this.params, вы можете назначить this.params либо при использовании канала tap(), либо при подписке на этот Observable.

...