Angular文本动态渐变异常：鼠标移动后文本变方块的解决方法

问题根源 #

触发mousemove后文本变成方块，核心原因是计算的角度值过大，浏览器处理超大角度时会出现渲染异常；另外原生addEventListener的使用不够规范，存在潜在内存泄漏风险。

修正方案 #

1. 简化模板代码 #

把固定的background-clip样式移到CSS中，模板只保留动态渐变的绑定：

<div class="name" [style.background]="gradient">Text Here</div>

2. 保留基础CSS样式 #

确保文本透明、背景裁剪生效：

.name
    color: transparent
    font-family: Tahoma, sans-serif
    background-clip: text
    -webkit-background-clip: text

3. 规范TS逻辑（关键修正） #

用Angular的HostListener监听鼠标移动，同时将角度限制在0-360deg范围内：

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.sass']
})
export class HomeComponent {
  gradient: string = "linear-gradient(270deg, #FA8BFF 0%, #2BD2FF 42%, #2BFF88 90%)";

  @HostListener('document:mousemove', ['$event'])
  onMouseMove(event: MouseEvent): void {
    // 将角度限制在0-360deg内，避免超大值导致渲染异常
    const angle = ((event.clientX + event.clientY) % 360);
    this.gradient = `linear-gradient(${angle}deg, #FA8BFF 0%, #2BD2FF 42%, #2BFF88 90%)`;
  }
}

可选优化：平滑角度变化 #

如果觉得角度跳变太生硬，可以用鼠标位置的比例计算更平滑的角度：

@HostListener('document:mousemove', ['$event'])
onMouseMove(event: MouseEvent): void {
  // 根据鼠标在窗口中的位置比例计算0-360deg的角度
  const xRatio = event.clientX / window.innerWidth;
  const yRatio = event.clientY / window.innerHeight;
  const angle = (xRatio + yRatio) * 180;
  this.gradient = `linear-gradient(${angle}deg, #FA8BFF 0%, #2BD2FF 42%, #2BFF88 90%)`;
}

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