Angular 在运行中单击后停止组件

Question

目前，我有一个边栏，可以让我单击各个组件。这些组件刷新 API 调用以获取数据。但是，当我将组件单击到另一个组件时，旧组件会继续刷新 API 数据，即使我已单击它时不需要它。

下面是一个测试组件。当我单击该组件时，它会打印出“测试组件仍处于活动状态”。当我从该组件单击另一个组件时，它仍然显示“测试组件仍然处于活动状态”，这告诉我该组件仍然是运行。有没有办法在我单击后关闭该组件？还是有更好的获取新数据的方法？

export class TestComponent implements OnInit {


userActivity;


  constructor(
  ) { }

  ngOnInit() {
    this.refreshData();
  }

  refreshData(){
    this.userActivity = setTimeout(() => {
      // where api data is called out
      console.log('test component is still active');
      this.refreshData();
    }, 5000);
  }
}

Answer 1

在处理异步代码（例如订阅或 Angular 组件内的 setTimeout() 时，这是一个非常常见的问题。 Angular 不会自动取消订阅或“杀死”此类异步代码 - 您必须处理它。
根据具体问题，有多种方法可以处理此问题。在您的情况下，您已经将 setTimeout 返回的句柄存储在 userActivity 中。您可以使用此句柄并清除 Angular 的 OnDestroy lifecycle hook 内的超时。将 OnDestroy 视为 OnInit 的对应物，它会在组件被销毁时调用。

export class TestComponent implements OnInit, OnDestroy {
  userActivity;

  constructor() {}

  ngOnInit() {
    this.refreshData();
  }

  refreshData() {
    this.userActivity = setTimeout(() => {
      // where api data is called out
      console.log('test component is still active');
      this.refreshData();
    }, 1000);
  }

  ngOnDestroy() {
    clearTimeout(this.userActivity);
  }
}

您可以在 this Stackblitz 中看到它的实际效果。如果您查看控制台输出，您应该会看到，一旦您从组件 1 切换到组件 2，您的 console.log 就不再被记录。

Angular 在运行中单击后停止组件

Angular stop component from running after it has been clicked off of

refresh

settimeout

typescript

angular

Angular 在 运行 中单击后停止组件

Angular stop component from running after it has been clicked off of

refresh

settimeout

typescript

angular

Angular 在运行中单击后停止组件