Angular中4个闪烁Div的16组颜色序列切换实现需求

嘿，这就给你安排完全贴合需求的实现方案，一步步来：

1. 先写组件的HTML模板 #

我们用4个div，通过绑定动态背景色来实现颜色切换，模板代码如下：

<!-- flash-divs.component.html -->
<div class="flash-container">
  <div 
    class="flash-item" 
    [style.backgroundColor]="currentColors[0]"
  ></div>
  <div 
    class="flash-item" 
    [style.backgroundColor]="currentColors[1]"
  ></div>
  <div 
    class="flash-item" 
    [style.backgroundColor]="currentColors[2]"
  ></div>
  <div 
    class="flash-item" 
    [style.backgroundColor]="currentColors[3]"
  ></div>
</div>

2. 给div加基础样式 #

让div看起来规整些，还可以加个颜色过渡动画让切换更平滑：

/* flash-divs.component.css */
.flash-container {
  display: flex;
  gap: 1rem;
  padding: 2rem;
}

.flash-item {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  transition: background-color 0.2s ease; /* 颜色变化时的平滑过渡 */
}

3. 核心逻辑：获取API数据+定时切换 #

这部分是关键，我们要处理API请求、定时切换颜色组，还要记得清理定时器防止内存泄漏：

// flash-divs.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http';

// 定义颜色组的类型，对应每组的4个颜色
interface ColorPattern {
  [index: number]: string;
}

@Component({
  selector: 'app-flash-divs',
  templateUrl: './flash-divs.component.html',
  styleUrls: ['./flash-divs.component.css']
})
export class FlashDivsComponent implements OnInit, OnDestroy {
  colorPatterns: ColorPattern[] = []; // 存储API返回的16组颜色数据
  currentColors: ColorPattern = [];   // 当前显示的一组颜色
  currentIndex = 0;                   // 当前颜色组的索引
  private flashTimer?: ReturnType<typeof setInterval>; // 定时器引用

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    // 组件初始化时先获取颜色数据
    this.fetchColorPatterns();
  }

  ngOnDestroy(): void {
    // 组件销毁时一定要清掉定时器，避免内存泄漏
    if (this.flashTimer) {
      clearInterval(this.flashTimer);
    }
  }

  private fetchColorPatterns(): void {
    // 把这里的URL换成你的实际API地址
    this.http.get<ColorPattern[]>('/api/color-patterns').subscribe({
      next: (patterns) => {
        this.colorPatterns = patterns;
        // 确保有数据才启动循环
        if (this.colorPatterns.length > 0) {
          this.currentColors = this.colorPatterns[0];
          this.startFlashCycle();
        }
      },
      error: (err) => {
        console.error('获取颜色数据失败啦:', err);
      }
    });
  }

  private startFlashCycle(): void {
    // 每秒切换一组颜色，到最后一组后自动回到第一组循环
    this.flashTimer = setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.colorPatterns.length;
      this.currentColors = this.colorPatterns[this.currentIndex];
    }, 1000);
  }
}

几个要注意的小细节 #

• 别忘了在你的模块（比如AppModule）里导入HttpClientModule，不然HTTP请求会失效
• 如果API返回的是类似{Pattern1: [...], Pattern2: [...]}的对象，不是数组的话，可以用Object.values(response)把它转换成数组再用
• 要是觉得颜色切换的过渡动画没必要，直接删掉CSS里的transition属性就行

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