Angular Mat-Slide-Toggle 响应缓慢答案

【问题标题】：Angular Mat-Slide-Toggle Slow to RespondAngular Mat-Slide-Toggle 响应缓慢
【发布时间】：2020-04-15 19:46:54
【问题描述】：

我有一个简单的控制面板，它有一个 Angular Mat-Slide-Toggle 控件，如下所示：

<mat-slide-toggle (change)="onQAStateDisplayChanged($event)">Display QA Status</mat-slide-toggle>

change 事件上调用的函数简单地触发一个事件，如下所示：

@Output() qaStateDisplayChanged: EventEmitter<boolean> = new EventEmitter();
...
onQAStateDisplayChanged(event: MatSlideToggleChange) {
    this.qaStateDisplayChanged.emit(event.checked);
}

我的容器组件，监听事件，调用一个需要几秒钟才能完成的函数。我曾希望在切换 SlideToggle 时会发出 qaStateDisplayChanged 事件，并且 SlideToggle 会立即滑过。实际发生的情况是您单击 SlideToggle，直到几秒钟后一切都完成后，视觉上没有任何变化，这不是一个很好的用户体验！

在收到事件后，使用 Three.js 进行一系列 3D 模型操作。浏览器似乎无法刷新 SlideToggle，因为它正在密集地操作 3D 模型。模型更新后，浏览器可以更新 UI，SlideToggle 会滑过。

谁能提出一种更能引起共鸣的替代方法？

【问题讨论】：

您的应用程序中一定有其他问题导致延迟。

标签： angular angular-material

【解决方案1】：

我在这里看到两个问题：

在繁重的计算过程中，UI 没有响应。这只是事实。
Slide Toggle 没有足够的时间来更改其 UI。

我可以针对第二个问题提出解决方法。您可以禁用动画并使用 setTimeout()。

添加到您的组件中：

providers: [
    {provide: ANIMATION_MODULE_TYPE, useValue: 'NoopAnimations'}
]

并使用类似的东西

onQAStateDisplayChanged(event: MatSlideToggleChange) {
    setTimeout(() => this.qaStateDisplayChanged.emit(event.checked), 80);
}

你可以在这里看到完整的工作示例https://stackblitz.com/edit/angular-qmjfuh

【讨论】：