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

Question

我有一个应用程序每 2 秒执行一次 HTTP 请求并更新视图。问题是，我必须做一些用户触发的 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
}

视图未更新。

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

Answer 1

延迟 observable 订阅或延迟 observable 本身是帮助您访问 this link 的方法，这基本上表明延迟发生在绝对 time.So，基本上，你的代码应该像

this.dosingVessels$ = this.dosingVesselsQuery.selectAll().pipe(delaySubscription(1000));

或

this.dosingVessels$ = this.dosingVesselsQuery.selectAll().pipe(delay(1000));

Answer 2

debounce是否支持您的需求？您可以将一个 Observable 传递给它，您的链将等到该 Observable 发出后再继续。如果您需要它等待特定值，您还需要使用 filter 运算符。

我不确定您代码中的确切位置需要它，但它可能看起来像这样：

this.dosingVesselsQuery.selectAll().pipe(
    debounce(() => 
        this.updateView
            .pipe(filter(val => val == true))
            .pipe(first())));

编辑：

看来 debounce 能更好地满足您的需求。我已经相应地编辑了我的 post。

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

Delay observable flow while BehaviorSubject value === false

rxjs

angular

angular6

akita

angular-akita