删除/低按/鼠标按下/触摸启动延迟 Angular 8?

Question

我正在使用 Angular 8 (angular.io( 开发一个应用程序，并注意到按下/鼠标按下/触摸启动事件在触发之前有延迟，或者至少在视图中看到任何响应之前。有没有办法降低这种延迟或消除它？它发生在我的笔记本电脑和触摸屏面板上，所以我知道它不是特定于设备的。

Answer 1

您是否对组件使用 OnPush 更改检测策略？

如果是，那么我希望您的数据会异步更改。这意味着在数据准备就绪时不会触发更改检测 - 因此应用程序不会重新绘制组件。即使您的数据实际上已更改，在触发下一次更改检测之前，您也不会在屏幕上看到更改。

在这种情况下，您有几种选择：

1(在HTML中使用Observable(Subject，BehaviorSubject或普通Observable(与async管道而不是您使用的数据。

app.component.ts：

import { BehaviorSubject } from "rxjs";
class AppComponent {
counter$ = new BehaviorSubject(0);
onClick(): void {
setTimeout(() => {
this.counter$.next(this.counter$.getValue() += 1);
});
}
}

app.component.html

<div>You clicked {{ counter$ | async }} times</div>

2( 将 ChangeDetectorRef 注入到组件的构造函数中，并手动触发变更检测。

app.component.ts：

import { ChangeDetectorRef } from "@angular/core";
class AppComponent {
counter = 0;
constructor(private cdr: ChangeDetectorRef) {
}
onClick(): void {
setTimeout(() => {
this.counter += 1;
this.cdr.detectChanges();
});
}
}

在这里，您可以找到ChangeDetectionStrategy.OnPush的解释： https://blog.angular-university.io/onpush-change-detection-how-it-works/