Angular6 rxjs, отменяющий подписку на таймер OnDestroy не работает?

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

У меня есть различные компоненты, которые загружают разные вызовы api, но проблема в том, что когда я пытаюсь отказаться от подписки на эти таймерные подписки ondestroy, это просто не работает.

Я вхожу, проверяю, направляя на 2 компонента взад и вперед 5-6 раз. Обычно это будет подписка на подписку каждый раз, когда я перехожу к следующему.

Через 60 секунд все так много звонков, которые я делаю, как много раз, я переключался между этими двумя. поэтому я создал подписку на таймер каждый раз, когда я занимался одним из компонентов, но не уничтожал их.

EDIT, добавил мой полный код OnInit и OnDestroy ниже:

ngOnInit() {

    let mainTimer = timer(0, 60000);

    this.dataSourceSubscription = mainTimer.subscribe(t => {
      this.service.getSection3();
      this.dataSourceSubscription = this.section3.subscribe(data => {
        let countAccepted = data => {
          for (let i = 0; i < data.length; i++) {
            if (
              data[i].DeliveryStatus == "Accepted" &&
              data[i].BookingId == "0"
            ) {
              this.multidropAccepted++;
            }
          }
        };

        let countDepartedSite = data => {
          for (let i = 0; i < data.length; i++) {
            if (
              data[i].DeliveryStatus == "Departed Site" &&
              data[i].BookingId == "0"
            ) {
              this.multidropDepartedSite++;
            }
          }
        };


        let countPending = data => {
          for (let i = 0; i < data.length; i++) {
            if (
              data[i].DeliveryStatus == "Pending" &&
              data[i].BookingId == "0"
            ) {
              this.multidropPending++;
            }
          }
        };

        let countOnSite = data => {
          for (let i = 0; i < data.length; i++) {
            if (
              data[i].DeliveryStatus == "On Site" &&
              data[i].BookingId == "0"
            ) {
              this.multidropOnSite++;
            }
          }
        };

        let countTurnedAway = data => {
          for (let i = 0; i < data.length; i++) {
            if (
              data[i].DeliveryStatus == "Turned Away" &&
              data[i].BookingId == "0"
            ) {
              this.multidropTurnedAway++;
            }
          }
        };


        (this.dataSource = new MatTableDataSource(
          data.filter(
            (value, index, array) =>
              !array.filter(
                (v, i) => JSON.stringify(value) == JSON.stringify(v) && i < index
              ).length
          )
        )),
          (this.dataSource.sort = this.sort),
          (this.dataSource.paginator = this.paginator),
          this.multidropAccepted = 0;
          this.multidropDepartedSite = 0;
          this.multidropPending = 0;
          this.multidropOnSite = 0;
          this.multidropTurnedAway = 0;
          countAccepted(data),
          countDepartedSite(data),
          countPending(data),
          countOnSite(data),
          countTurnedAway(data),
          this.totalDeliveries = data.length;
      });

      this.lastUpdated.subscribe(data => {
        console.log(data);
      })
    })


    let pageTimer = timer(10000, 10000);

    this.pageSubscription = pageTimer.subscribe(t => {
      if (
        this.dataSource.paginator._pageIndex ==
        this.dataSource.paginator.getNumberOfPages()
      ) {
        this.dataSource.paginator.firstPage();
      } else {
        this.dataSource.paginator.nextPage();
      }
    });
  }

  ngOnDestroy() {
    this.dataSourceSubscription.unsubscribe();
    this.pageSubscription.unsubscribe();
  }

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

Всего 1 ответ


Итак, из того, что вы описали в вопросе, вообще говоря, я не думаю, что есть что-то неправильное в том, как вы подписываетесь и отменяете подписку на наблюдаемые.

Это означает, что ошибка должна быть чем-то глупо.

Для дальнейшего изучения, пожалуйста, проверьте:

  1. Есть ли опечатка с вашим кодом?

  2. ngOnDestroy() ли ngOnDestroy() ? - поставьте там консольный журнал и посмотрите, действительно ли он вызван, когда вы переключаетесь с текущей страницы. Если нет, вы, вероятно, придерживаетесь тех же правил маршрута, даже если страница, похоже, будет изменена.


Подписка перезаписывается, поэтому она больше не указывает на таймер. Когда вы уничтожаете (отписываете) его, оно фактически отменяет подписку на внутреннее наблюдаемое, а не на наблюдаемый таймер.

this.dataSourceSubscription = mainTimer.subscribe(t => {
  this.dataSourceSubscription = this.section3.subscribe(data => {});
});

Есть идеи?

10000