我有一个应用程序每 2 秒执行一次 HTTP 请求并更新 View 。问题是,我必须做一些用户触发的 CSS 动画,这些动画大约需要一秒钟,而且经常会被破坏,因为 Angular 在动画运行时会更新 DOM。
我正在使用 Akita像这样存储和检索可观察对象:
this.dosingVessels$ = this.dosingVesselsQuery.selectAll().pipe(*needs rxjs operator magic*);
然后像这样在组件中显示它们:
<app-solving-vessel *ngFor="let vessel of solvingVessels$ | async"
[vessel]="vessel"
[ngClass]="{'animation-class': hoverId === vessel.id}">
</app-solving-vessel>
我怎样才能在动画进行时实现这一点:
animate(event, vessel) {
this.updateView.next(false); // prevent from updating
this.hoverId = vessel.id; // triggers animation
timer(1000).subscribe(tick => this.updateView.next(true)); // allow normal updating
}
View 没有更新。
我发现了 delayWhen 运算符,但所有示例都带有计时器,我不确定它是否是正确的方法。
最佳答案
debounce
是否支持您的需求?您可以将一个 Observable 传递给它,您的链将等到该 Observable 发出后再继续。如果您需要它等待特定值,您还需要使用 filter
运算符。
我不确定您代码中的确切位置需要这样做,但它可能看起来像这样:
this.dosingVesselsQuery.selectAll().pipe(
debounce(() =>
this.updateView
.pipe(filter(val => val == true))
.pipe(first())));
编辑:
debounce
似乎能更好地支持您的需求。我已经相应地编辑了我的帖子。
关于angular - 当 BehaviorSubject 值 === false 时延迟可观察流,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52056589/