超出最大调用堆栈大小（Angular 8）答案

【问题标题】：Maximum call stack size exceeded (Angular8)超出最大调用堆栈大小（Angular 8）
【发布时间】：2020-06-07 14:04:54
【问题描述】：

我正在尝试在 Angular 中执行以下操作，但我不明白问题出在哪里？了解这是一个递归函数，但在 javascript 中有很多解决方法可以解决这个问题，我在这里尝试过，但没有成功你有什么解决办法吗？

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
  constructor() {}

  changeImg = () => {
    let i = 0;
    const time = 1000;
    const images = [
      '../../assets/imgs/dashboard_full_1.webp',
      '../../assets/imgs/dashboard_full_2.webp'
    ];
    document.slide.src = images[i];
    if (i < images.length - 1) {
      i++;
    } else {
      i = 0;
    }

    setTimeout(this.changeImg(), time);
  };

  ngOnInit() {
    this.changeImg();
  }
}

【问题讨论】：

标签： angular typescript

【解决方案1】：

你的问题在这里：

setTimeout(this.changeImg(), time);

你正在调用this.changeImg()，它调用this.changeImg()，然后调用this.changeImg()，直到Angular对你感到厌烦并崩溃你的应用程序。

如果没有发生调用堆栈大小错误，您会将this.changeImg() 的结果传递给setTimeout，而不是按预期将引用传递给函数。

只需删除调用。

setTimeout(this.changeImg, time);

【讨论】：

如何在 ngOninit 中使用 set timeout 或 setinterval 以便我可以一遍又一遍地重复该功能，或者这样做的最佳做法是什么？
如果您按照我的建议从changeImg 中删除调用，您的方法就很好。至于什么是最佳实践我不能说，但我个人认为，如果你在ngOnInit 内设置一个间隔而不是让changeImg 不断设置超时，会更清楚。请记住，setTimer 和 setInterval 都需要一个函数引用，所以不要调用 this.changeImg：setInterval(this.changeImg, 1000)
每个人都必须首先学习，我的伙计。重要的是你提出了这个问题，而不是放弃或责备 Angular。