使用 ngClass 更改指针答案

【问题标题】：change pointer using ngClass使用 ngClass 更改指针
【发布时间】：2019-10-10 21:40:56
【问题描述】：

我正在使用 ngClass 添加和删除类。我想改变指针。我的组件的html代码

[ngClass]="{'zoom-cursor': cyClass}"

我在同一组件的相应打字稿代码中有一个名为 cyClass 的布尔值。

我的 CSS 代码是 .zoom-cursor { cursor: url(../src/assets/img/zoom-cursor.svg), pointer!important; }

如果我移动鼠标，指针图像会按预期变化。 BUT 如果鼠标没有移动，则没有任何变化。我想立即看到变化。似乎角度没有呈现变化。我试图手动触发它，但我找不到方法。

【问题讨论】：

如何更改 cyClass 变量？通过任何 HTML 元素上的一些点击事件？如果您使用点击事件更改变量，最初这些 HTML 元素有自己的 cursor 属性正在应用，因此您无法立即看到更改，您还需要将 [ngClass] 应用于这些 HTML 元素。在这个分叉中，我通过“左键”单击更改 cyClass 值并将 [ngClass] 也应用于“左键” - stackblitz.com/edit/angular-5r6u3p-nabsuj
AS Hemendra，我认为您正在更改变量“cyClass”的值。前段时间我发疯了，因为我在过滤数组时使用= 而不是==
感谢所有答案和 cmets。我无法理解，但在我重新启动计算机后，它以某种方式按预期工作。我什至不调用像detectChanges 这样的方法。 PS焦点应该在浏览器屏幕上（如果你点击删除控制台日志，之后你应该点击浏览器上的某个地方）

【解决方案1】：

您可以注入 ChangeDetectorRef 并手动触发更改检测：

constructor(private ref: ChangeDetectorRef) {}

// In code, where you the value of cyClass, call
this.ref.detectChanges();

【讨论】：