Angular 主题和订阅

Question

我有一个组件，它有一个方法interval()，当一个按钮被点击时。

 interval() {
    this.statusInterval = interval(2000).subscribe(x => {
      this.interval2 = x;
      console.log(this.interval2);
      this.assetItemActionService.sendNumber(x);
    })
  }

在构造函数中，我有这个订阅，它应该更新那个值。

 interval2 = 0;
 percentSubscription= Subscription;
  constructor(private service:Service) {
    console.log('takeee');
    this.percentSubscription = this.service.number$.subscribe(percent => {
      console.log("set number");
      this.interval2 = percent;
    }, error => console.log(error))
  }

最多 2 个代码片段在同一个组件中。

在服务中，我有这个不断更新的主题。

private number: Subject<number> = new Subject();
number$ = this.number.asObservable();

  sendNumber(number) {
    console.log('received');
    this.number.next(number);
  }

问题是当我路由到另一个页面时，UI 没有更新，构造函数的部分不再工作，我无法订阅，但在控制台中，值每次都会更新。所以 UI 没有呈现，并且在我回到组件后我不能再订阅那个主题了。

我该如何解决这个问题？

Answer 1

您应该unsubscribe 组件中的subscription(s)。

离开组件后您仍然能够在控制台上看到日志这一事实清楚地表明您没有订阅中的unsubscribed，这反过来又会导致内存泄漏。

来，试试看：

import { Component, OnInit } from "@angular/core";
import { Subscription, interval } from "rxjs";

import { NumberService } from "../number.service";

@Component({
  selector: "app-some",
  templateUrl: "./some.component.html",
  styleUrls: ["./some.component.css"]
})
export class SomeComponent implements OnInit {
  interval2 = 0;
  percentSubscription = Subscription;
  statusInterval;

  constructor(private assetItemActionService: NumberService) {
    console.log("takeee");
    this.percentSubscription = this.assetItemActionService.number$.subscribe(
      percent => {
        console.log("set number");
        this.interval2 = percent;
      },
      error => console.log(error)
    );
  }

  ngOnInit() {
    this.interval();
  }

  interval() {
    this.statusInterval = interval(2000).subscribe(x => {
      this.interval2 = x;
      console.log(this.interval2);
      this.assetItemActionService.sendNumber(x);
    });
  }

  ngOnDestroy() {
    this.percentSubscription.unsubscribe();
    this.statusInterval.unsubscribe();
  }
}

PS：您没有指定您在模板中使用的内容。所以我刚刚将路由添加到两个组件（some 和 hello）。

---

这里有一个Working Demo 供您参考。