我在一个组件中使用了以下方法:

ngOnInit()
        {
            this.battleInit();
            setInterval(() => {
                this.battleInit(); 
                }, 5000);
        }

现在,我只需要在用户位于这个特定组件中时运行这个间隔,这意味着当用户离开这个组件时,间隔将停止.

目前,每5秒执行一次this.battleInit(),即使在用户离开此页面之后也是如此.

简短问题:当用户(通过路由)导航到另一个组件时,如何停止setInterval()

推荐答案

您需要在组件的ngOnDestroy hook方法中使用clearInterval方法.为此,需要通过setInterval方法保存返回的值.

以下是一个示例:

ngOnInit() {
  this.battleInit();
  this.id = setInterval(() => {
    this.battleInit(); 
  }, 5000);
}

ngOnDestroy() {
  if (this.id) {
    clearInterval(this.id);
  }
}

Angular相关问答推荐

日语字符不受角形约束控制

HTTP Get请求未发送到提供的URL

自动完成搜索过滤器不适用于Angular 中动态添加的输入字段

尾风手风琴中的Ngor

未触发HTTP拦截器

要素存储更改根存储状态

Angular 17:在MouseOver事件上 Select 子组件的正确ElementRef

从canActivate创建时,Angular material 对话框不接收MAT_DIALOG_DATA

截获火灾前调用公共接口

在以下位置升级到Angular 16 Break Sharepoint广告:This._history.replaceState不是函数

Angular Mat Select 显示键盘焦点和鼠标悬停焦点的问题

Angular 15:在范围内提供相同标记时附加到提供的值

Angular:try 在点击次数后禁用按钮

如何在Angular Material2中获取活动选项卡

Angular2 CLI 错误@angular/compiler-cli包未正确安装

移除 Angular 组件创建的宿主 HTML 元素 Select 器

Angular 5 测试:如何获取对子组件的引用

在Angular 6 中找不到 HammerJS

如何每隔一段时间发出 HTTP 请求?

Angular 9 引入了需要加载的全局$localize()函数