角停止组件在被点击后停止运行答案

【问题标题】：Angular stop component from running after it has been clicked off of角停止组件在被点击后停止运行
【发布时间】：2022-01-11 03:22:08
【问题描述】：

目前，我有一个侧边栏，可让我单击各个组件。这些组件刷新 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);
  }
}

【问题讨论】：

标签： angular typescript refresh settimeout

【解决方案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 就不再被记录。

【讨论】：