Комбинированные трубопроводные операторы с RxJS / Angular - PullRequest
Новая
       87

Комбинированные трубопроводные операторы с RxJS / Angular

1 голос
/ 11 ноября 2019

Возможно ли (я не могу найти ничего исчерпывающего по этому поводу) объединить несколько переносимых операторов в одну функцию, так что я могу передать это по конвейеру и повторно использовать в другом методе?

Здесьвещь: 

public ngOnInit(): void {
      this.route.url
            .pipe(
                switchMap( (ids: UrlSegment[]) => /* http call */),
                tap(result => /* setting a variable within a service */),
                tap(result => /* some more manipulating and logic */),
                map(result => /* setting a _this_ variable */)
            )
            .subscribe( () => {
                /* some other async tasks, which depend on _this_ variables */
                this.cdr.detectChanges();
            });
      }

Как мне извлечь все внутри pipe(), чтобы я мог вызывать одну и ту же цепочку операторов из другого метода, который должен был бы выполнить тот же HTTP-вызов и последующую логику и манипулирование?

Я пытаюсь достичь: 

 this.route.url
   .pipe(
       this.combinedPipableMethod(url: UrlSegment[])
   )
   .subscribe()

Ответы [ 3 ]

3 голосов
/ 11 ноября 2019

Вы можете извлечь метод: 

getData(ids: UrlSegment[]) {
   return this.http.get(/* url construction logic */)
      .pipe(
         tap(result => /* setting a variable within a service */),
         tap(result => /* some more manipulating and logic */),
         map(result => /* setting a _this_ variable */)
      );
}

А затем switchMap к нему: 

public ngOnInit(): void {
   this.route.url
      .pipe(
          switchMap(this.getData),
       )
       .subscribe( () => {
          /* some other async tasks, which depend on _this_ variables */
          this.cdr.detectChanges();
       });
}

В противном случае, вы можете сделать пользовательский оператор, но это кажется излишним для этогоцель: 

const combinedPipableMethod = () => {
  return source => defer(() => {
    return source.pipe(
       switchMap((ids: UrlSegment[]) => /* http call */),
       tap(result => /* setting a variable within a service */),
       tap(result => /* some more manipulating and logic */),
       map(result => /* setting a _this_ variable */)
    )
  })
}

public ngOnInit(): void {
   this.route.url
      .pipe(
          combinedPipableMethod(),
       )
       .subscribe( () => {
          /* some other async tasks, which depend on _this_ variables */
          this.cdr.detectChanges();
       });
}
1 голос
/ 11 ноября 2019

Вы можете использовать функцию rxjs pipe (обратите внимание, это отдельная функция, а не метод Observable), чтобы объединить последовательность операторов в один оператор многократного использования. 

import { pipe } from "rxjs";
 const customPipable = pipe(
     switchMap( (ids: UrlSegment[]) => /* http call */),
     tap(result => /* setting a variable within a service */),
     tap(result => /* some more manipulating and logic */),
     map(result => /* setting a _this_ variable */)
 )
  this.route.url
  .pipe(customPipable)
  .subscribe()

Здесьэто статья об этом

0 голосов
/ 11 ноября 2019

Вы можете сохранить цепочку в пределах Subject, а затем просто вызвать next() для субъекта, чтобы заставить конвейер работать 

//Subject for storing pipeline
loadDataSubject = new Subject();

ngOnInit() {
  loadDataPipe(this.loadDataSubject).subscribe(
     /* some other async tasks, which depend on _this_ variables */
     this.cdr.detectChanges();
  )
}

loadDataPipe(source) {
  return source.pipe(
       switchMap( (ids: UrlSegment[]) => /* http call */),
       tap(result => /* setting a variable within a service */),
       tap(result => /* some more manipulating and logic */),
       map(result => /* setting a _this_ variable */)
  )
}

Теперь не стесняйтесь снова запускать конвейер, где бы вы ни чувствоваликак с next(): 

 ....
 this.loadDataSubject.next();
 ....
...