Превышен максимальный размер стека вызовов (Angular8)

Question

Я пытаюсь сделать ниже в 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();
  }
}

Answer 1

Ваша проблема здесь:

setTimeout(this.changeImg(), time);

Вы вызываете this.changeImg(), который вызывает this.changeImg(), который затем вызывает this.changeImg() и так далее, пока Angular не надоест из вас и вылетает ваше приложение.

Если бы ошибка размера стека вызовов не произошла, вы бы передали результат this.changeImg() в setTimeout вместо передачи ссылки к функции, как ожидалось.

Просто удалите вызов.

setTimeout(this.changeImg, time);