Angular图片滑块组件使用ngOnInit时无法加载的问题求助

核心问题：高频定时器阻塞浏览器主线程 #

你在more.component.html中给autoPlaySpeed传了5（毫秒），这个数值过小——setInterval会每5毫秒触发一次图片切换，再叠加jumpToSlide里的setTimeout异步任务，直接导致浏览器主线程被大量任务占满，页面无法加载。另外，原生setInterval若不手动清理，组件销毁后定时器仍会持续运行，造成内存泄漏。

修复步骤 #

1. 修正自动播放速度参数

将more.component.html中的autoPlaySpeed改为合理数值（比如3000毫秒，即3秒）：

<div
  style="
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    padding: 20px;
    gap: 20px;
  "
>
  <app-image-slider
    [indicatorsVisible]="false"
    [animationSpeed]="100"
    [slides]="slides"
    [autoPlay]="true"
    [autoPlaySpeed]="3000"
  ></app-image-slider>

  <app-image-slider
    [indicatorsVisible]="true"
    [animationSpeed]="400"
    [slides]="slides"
    [autoPlay]="true"
    [autoPlaySpeed]="3000"
  ></app-image-slider>
</div>

2. 优化定时器管理（避免内存泄漏）

在ImageSliderComponent中添加ngOnDestroy钩子，清理定时器ID：

import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-image-slider',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './image-slider.component.html',
  styleUrl: './image-slider.component.scss',
})
export class ImageSliderComponent implements OnInit, OnDestroy{
  @Input() slides: any[] = [];
  @Input() indicatorsVisible = true;
  @Input() animationSpeed = 500;
  @Input() autoPlay = true;
  @Input() autoPlaySpeed = 3000;
  currentSlide = 0;
  hidden = false;
  private intervalId: number | undefined;

  next() {
    let currentSlide = (this.currentSlide + 1) % this.slides.length;
    this.jumpToSlide(currentSlide);
  }

  previous() {
    let currentSlide =
      (this.currentSlide - 1 + this.slides.length) % this.slides.length;
    this.jumpToSlide(currentSlide);
  }

  jumpToSlide(index: number) {
    this.hidden = true;
    setTimeout(() => {
      this.currentSlide = index;
      this.hidden = false;
    }, this.animationSpeed);
  }

  ngOnInit() {
    if (this.autoPlay && this.slides.length > 1) {
      this.intervalId = window.setInterval(() => {
        this.next();
      }, this.autoPlaySpeed);
    }
  }

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

3. 额外优化：空数组边界判断

在ngOnInit中增加slides.length > 1的判断，避免当图片数组为空或仅一张图时，定时器无意义运行。

验证效果 #

修改完成后，页面可正常加载，自动轮播会按设置的间隔切换图片，组件销毁时定时器也会被清理，不会产生内存泄漏问题。

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