如何用Angular自定义directive实现宿主文本每1秒切换随机预定义颜色

1. 指令完整代码 #

import { Directive, ElementRef, OnInit, OnDestroy } from '@angular/core';

@Directive({
  selector: '[appRandomColor]' // 指令选择器，模板中直接用该属性调用
})
export class RandomColorDirective implements OnInit, OnDestroy {
  // 预定义可选颜色数组，可按需求自行扩展
  private readonly colorList: string[] = ['red', 'blue', 'green', 'yellow', 'maroon', 'purple', 'orange', 'cyan'];
  // 存储定时器ID，用于指令销毁时清除避免内存泄漏
  private timer: number | null = null;

  constructor(private hostEl: ElementRef<HTMLElement>) {}

  ngOnInit(): void {
    // 指令初始化后启动定时器，每1秒执行一次颜色切换
    this.timer = window.setInterval(() => {
      // 随机获取颜色数组下标
      const randomIndex = Math.floor(Math.random() * this.colorList.length);
      // 给宿主元素设置字体颜色
      this.hostEl.nativeElement.style.color = this.colorList[randomIndex];
    }, 1000);
  }

  ngOnDestroy(): void {
    // 指令销毁时清除定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
}

2. 注册指令 #

如果是 NgModule 项目，把该指令添加到对应模块的 declarations 数组中即可；如果是独立组件项目，直接把指令加到对应组件的 imports 数组里。

3. 模板中调用 #

直接在要生效的宿主元素上添加指令属性即可：

<!-- 示例使用 -->
<p appRandomColor>这段文字的字体颜色每秒都会随机切换</p>
<h3 appRandomColor>标题也可以绑定该效果</h3>

可选优化 #

如果需要外部自定义颜色列表，添加 @Input() 参数接收外部传入的颜色数组，替换内部预定义的 colorList 即可。

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