在Angular中以编程方式设置鼠标光标的最佳实践是什么？

在Angular里，推荐通过数据绑定的方式编程控制鼠标光标，避免直接操作DOM，以下是两种常用且规范的实现方式：

方式一：直接使用[style.cursor]属性绑定 #

这种方式简洁直接，适合单一样式的绑定场景。

HTML模板 #

<div [style.cursor]="cursorStyle">这里是需要改变光标样式的内容</div>

TypeScript逻辑 #

// 组件内定义光标样式变量
cursorStyle: string = 'default';

// 设置为指针光标
setCursorPointer(): void {
  this.cursorStyle = 'pointer';
}

// 恢复默认光标
setCursorDefault(): void {
  this.cursorStyle = 'default';
}

方式二：使用[ngStyle]指令 #

当需要同时绑定多个样式时，ngStyle会更灵活，也可单独用来绑定光标样式。

HTML模板 #

<div [ngStyle]="{ 'cursor': cursorStyle }">这里是需要改变光标样式的内容</div>

TypeScript逻辑 #

与方式一的TS代码完全一致：

cursorStyle: string = 'default';

setCursorPointer(): void {
  this.cursorStyle = 'pointer';
}

setCursorDefault(): void {
  this.cursorStyle = 'default';
}

额外最佳实践建议 #

• 用枚举约束光标样式可选值，避免拼写错误：

  enum CursorStyle {
    Default = 'default',
    Pointer = 'pointer',
    Wait = 'wait',
    Crosshair = 'crosshair'
  }
  
  cursorStyle: CursorStyle = CursorStyle.Default;
  
  setCursorPointer(): void {
    this.cursorStyle = CursorStyle.Pointer;
  }
  

• 若需全局设置光标（如加载状态），可通过Angular的Renderer2操作body样式，避免直接操作DOM：

  constructor(private renderer: Renderer2) {}
  
  setGlobalWaitCursor(): void {
    this.renderer.setStyle(document.body, 'cursor', 'wait');
  }
  
  resetGlobalCursor(): void {
    this.renderer.removeStyle(document.body, 'cursor');
  }
  

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