Question

所以我有一个计时器，每60秒调用一次api（这是一个数字标牌应用程序，因此不会发生任何交互，但我希望它自动更新）

我有各种组件可以加载不同的api调用，但是问题是，当我试图在destroy上取消订阅这些计时器订阅时，它根本无法工作。

我进去，通过将2个组件来回路由5-6次来进行测试。通常，每次我转到下一个时，它都应该取消订阅。

经过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();
    }
  }

Answer 1

因此，从您对问题的描述来看，一般而言，我认为您对可观察对象的订阅和取消订阅没有任何问题。

这意味着错误一定是愚蠢的。

要进一步调查，请检查：

您的代码有错字吗？
ngOnDestroy()是否真的被执行？ -在其中放置一个控制台日志，看看当您离开当前页面时是否真的被调用。如果没有，即使页面似乎已更改，您也可能会保留相同的路由规则。

订阅被覆盖，因此不再指向计时器。销毁（取消订阅）它实际上是取消订阅内部可观察到的内容，而不是计时器可观察到的内容。

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

取消订阅计时器订阅的Angular6 rxjs无法运行OnDestroy吗？

1 个答案: