Angular6 rxjs отписаться на таймер подписки OnDestroy не работает? - PullRequest
Новая
       47

Angular6 rxjs отписаться на таймер подписки OnDestroy не работает?

0 голосов
/ 15 октября 2018

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

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

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

РЕДАКТИРОВАТЬ, добавил мой полный код 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 Ответ

0 голосов
/ 15 октября 2018

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

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

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

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

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

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

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