Как работать только с одним наблюдателем и не звонить другим?

Question

У меня есть следующее использование потоков rx js:

ngOnInit() {
    combineLatest(
        this.eventsService.subjectSearchDistribution.pipe(
            tap((querySearch) => {
                this.paginationService.setQuery(querySearch);
                this.paginationService.reset();
            }),
        ),
        this.eventsService.subjectSortingDistribution.pipe(
            tap((sortedList: ListItem[]) => {
                this.paginationService.setSortBy(getSortingString(sortedList));
            }),
        ),
        this.eventsService.subjectFilterDistribution.pipe(
            tap((filterUrl) => {
                const page = 1;
                this.paginationService.setFilterBy(filterUrl);
                this.paginationService.setCurrentPage(page);
                this.paginationService.calculateOffsetLimit(page);
            }),
        ),
        this.eventsService.subjectFilterDistributionReset.pipe(tap(() => this.paginationService.reset())),
    ).subscribe(() => {
        this.loadPage();
    });
}

Проблема в том, что мне нужно обрабатывать только один случай, только один поток и не вызывать другие, в результате вызывается this.loadPage();.

Теперь, когда я отправляю сообщение на this.eventsService.subjectSearchDistribution, this.eventsService.subjectSortingDistribution, this.eventsService.subjectFilterDistribution.

, я вижу, что вызов this.loadPage(); увеличивается с первого раза на +1 каждое событие.

ТАК, ТОЛЬКО один наблюдатель может быть активным, а не все вместе.

Как исправить?

Answer 1

Кажется, причина, по которой ваш метод loadPage вызывается дважды, из-за ваших прослушивателей событий, но без предоставления кода для этих методов я не могу подтвердить эту проблему. Самый простой способ исправить ваш двойной вызов метода loadPage - это:

class A {
  constructor() {
    this.pageLoadCalled = false;
    this.loadPage();
    this.events.filter.listen().subscribe((res) => this.loadPage());
    this.events.search.listen().subscribe((res) => this.loadPage());
  }

  loadPage() {
    if (this.pageLoadCalled) {
      // Exit early (will not call anything below the return)
      return;
    }
    // Mark this method as being called
    this.pageLoadCalled = true;
    return new Promise((resolve) => {
      // do stuff
      resolve();
    });
  }
}

Answer 2

Если вы хотите вызвать loadPage только один раз, не выполняйте его, когда events.filter и events.search срабатывают:

class A {
   constructor() {
      // Call pageLoad in the constructor only once
      this.loadPage();

      // Remove call to pageLoad when events fire.
      // this.events.filter.listen().subscribe((res) => this.loadPage());
      // this.events.search.listen().subscribe((res) => this.loadPage());
  }
}

Answer 3

Я решил это с помощью rx js:

ngOnInit() {
    combineLatest(
        this.eventsService.subjectSearchDistribution.pipe(
            tap((querySearch) => {
                this.paginationService.setQuery(querySearch);
                this.paginationService.reset();
            }),
        ),
        this.eventsService.subjectSortingDistribution.pipe(
            tap((sortedList: ListItem[]) => {
                this.paginationService.setSortBy(getSortingString(sortedList));
            }),
        ),
        this.eventsService.subjectFilterDistribution.pipe(
            tap((filterUrl) => {
                const page = 1;
                this.paginationService.setFilterBy(filterUrl);
                this.paginationService.setCurrentPage(page);
                this.paginationService.calculateOffsetLimit(page);
            }),
        ),
        this.eventsService.subjectFilterDistributionReset.pipe(tap(() => this.paginationService.reset())),
    )
        .pipe(takeUntil(this._onDestroy))
        .subscribe(() => {
            this.loadPage();
        });
}