小编Kle*_*ajs的帖子

在 BehaviorSubject 值 === false 时延迟可观察流

我有一个每 2 秒执行一次 HTTP 请求并更新视图的应用程序。问题是,我必须做一些用户触发的 CSS 动画,这些动画大约需要一秒钟并且经常被破坏,因为 Angular 在动画运行时更新 DOM。

我使用Akita商店并像这样检索 observables:

this.dosingVessels$ = this.dosingVesselsQuery.selectAll().pipe(*needs rxjs operator magic*);
Run Code Online (Sandbox Code Playgroud)

然后像这样在组件中显示它们:

    <app-solving-vessel *ngFor="let vessel of solvingVessels$ | async"
                    [vessel]="vessel"
                    [ngClass]="{'animation-class': hoverId === vessel.id}">
    </app-solving-vessel>
Run Code Online (Sandbox Code Playgroud)

在动画进行时我怎么能做到这一点:

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
}
Run Code Online (Sandbox Code Playgroud)

视图没有更新。

我发现了 delayWhen 运算符,但所有示例都带有计时器,我不确定这是否是正确的方法。

rxjs angular angular6 akita angular-akita

4
推荐指数
1
解决办法
2087
查看次数

标签 统计

akita ×1

angular ×1

angular-akita ×1

angular6 ×1

rxjs ×1