Angular 5中调用setInterval报错：_co.setInterval is not a function 求助

嘿，刚看到你的问题啦，作为Angular新手碰到这个报错确实挺懵的，我来帮你捋清楚问题出在哪以及怎么解决～

错误原因分析 #

你遇到的ERROR TypeError: _co.setInterval is not a function，核心问题出在Angular模板的上下文限制：模板里的所有表达式都是基于你的组件实例来执行的，而setInterval是全局window对象的方法，组件实例里并没有这个方法，所以Angular会报错找不到它。

解决方案 #

咱们把定时器的逻辑封装到组件类里，不要直接在模板里调用全局方法，具体步骤如下：

1. 完善GameComponent的组件类代码

假设你的GameComponent代码大概是这样的，我们补充定时器相关的逻辑：

import { Component, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-game',
  templateUrl: './game.component.html',
  styleUrls: ['./game.component.css']
})
export class GameComponent implements OnDestroy {
  gameNumber = 0;
  private gameTimer: any; // 存储定时器实例，方便后续清除

  // 你的核心游戏逻辑：递增数字并打印
  startGame() {
    this.gameNumber++;
    console.log(this.gameNumber);
  }

  // 启动定时器的方法，供模板调用
  startGameTimer() {
    // 在组件类里可以直接访问全局的setInterval
    this.gameTimer = setInterval(() => {
      this.startGame();
    }, 1000); // 这里设置每隔1秒执行一次，你可以根据需求调整时间间隔
  }

  // 组件销毁时清除定时器，防止内存泄漏
  ngOnDestroy() {
    if (this.gameTimer) {
      clearInterval(this.gameTimer);
    }
  }
}

2. 修改GameComponent的模板

把按钮的点击事件绑定到组件类里的startGameTimer方法，而不是直接调用setInterval：

<button (click)="startGameTimer()">开始游戏</button>

额外提醒 #

一定要实现OnDestroy钩子并清除定时器哦！如果组件销毁后定时器还在运行，会造成不必要的内存泄漏，这是Angular开发里的一个小细节，但很重要～

这样调整之后，你点击开始按钮就能正常触发定期调用startGame()的逻辑啦，再也不会出现那个报错啦😉

内容的提问来源于stack exchange，提问作者SilverFish