Angular：鼠标停止移动时ngClass条件样式未生效问题

问题描述 #

想要在鼠标停止移动时为元素应用样式类，已通过控制台检测到鼠标移动及停止状态，但鼠标停止时样式未成功切换。

问题根源 #

1. this指向错误：setTimeout(this.mouseStopped, 300)中，回调函数的this默认指向全局上下文而非组件实例，导致mouseStopped里修改的mouseMove不是组件变量，视图无法感知变化。
2. 定时器未正确复用：timer是move函数的局部变量，每次触发mousemove都会重新创建，无法清除之前的定时器，可能导致多次触发停止逻辑。
3. DOM元素获取不规范：原代码中this.tooltip未通过Angular的ViewChild正确绑定，可能导致DOM操作失败。

修复方案 #

1. 修正组件TS代码 #

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  mouseMove = false;
  private timer: any;
  @ViewChild('tooltip') tooltip!: ElementRef;

  enter() {
    this.tooltip.nativeElement.classList.add('show');
  }

  mouseStopped() {
    this.mouseMove = false;
    console.log("mousemove: " + this.mouseMove);
  }

  move(e: { pageX: number; pageY: number }) {
    this.mouseMove = true;
    console.log("mousemove: " + this.mouseMove);

    clearTimeout(this.timer);
    this.timer = setTimeout(() => this.mouseStopped(), 300);

    const tooltipStyle = this.tooltip.nativeElement.style;
    tooltipStyle.left = e.pageX + 'px';
    tooltipStyle.top = e.pageY + 'px';
  }

  leave() {
    this.tooltip.nativeElement.classList.remove('show');
  }
}

2. 完善HTML模板（添加tooltip模板引用） #

<div
  class="wrapper"
  (mouseenter)="enter()"
  (mousemove)="move($event)"
  (mouseleave)="leave()"
>
  <p>Start editing to see some magic happen :)</p>
  <div class="sites-circle" [ngClass]="mouseMove ? 'onMove' : 'notMove'">
    hello
  </div>
  <div #tooltip class="tooltip">Tooltip content</div>
</div>

3. 优化CSS（移除不必要的!important） #

.sites-circle.notMove {
  transform: scale(1);
}
.sites-circle.onMove {
  transform: scale(3);
}

修复说明 #

• 箭头函数确保mouseStopped内的this指向组件实例，修改mouseMove后Angular变更检测会自动更新视图样式类。
• 组件级别的timer变量保证每次鼠标移动时清除之前的定时器，避免重复触发停止逻辑。
• 通过ViewChild规范获取DOM元素，符合Angular组件操作规范。

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