在 Angular 中,当切换元素的 CSS 类时,可能会导致性能问题。这是因为 Angular 默认情况下会重新计算整个组件的样式,并检查所有相关的子组件。为了解决这个性能问题,我们可以使用 Angular 的 ChangeDetectionStrategy.OnPush 策略。这将使 Angular 仅在输入更改时才检测组件,并跳过没有更新的组件。此外,我们也可以使用 ngClass 指令来动态地添加或删除 CSS 类,而不是使用 classList 属性。以下是一个例子:
在组件中设置 OnPush 策略:
@Component({ selector: 'example-component', templateUrl: 'example-component.html', changeDetection: ChangeDetectionStrategy.OnPush })
在模板中使用 ngClass 指令: