Question

我有一个SnackbarComponent，它负责显示带有用户信息的Snackbar。通知来自我在ServletContextListener中订阅的NotificationService。传入消息被推送到消息数组，并在3秒后从其移出。在我的html模板中，我遍历消息并显示它们。

SnackbarComponent

问题是，我想一次只显示3条消息并延迟其他消息（或者如果当前少于3条消息，则立即显示）。

我有一个可行的解决方案，如下所示：

export class SnackbarComponent implements OnInit, OnDestroy {
  private notificationSubscription: Subscription;
  messages: NotificationMessage[] = [];

  constructor(private notificationService: NotificationService) {
  }

  ngOnInit() {
    this.notificationSubscription = this.notificationService.notification$
      .subscribe(
        (message: NotificationMessage) => {
          this.messages.push(message);
          setTimeout(() => {
            this.messages.shift();
          }, 3000);
        }
      )
  }

  ngOnDestroy(): void {
    this.notificationSubscription.unsubscribe();
  }

如果有3条或3条消息，则新消息将被推送到messagesQueue，并且private notificationSubscription: Subscription; messages: NotificationMessage[] = []; messagesQueue: NotificationMessage[] = []; ngOnInit() { this.notificationSubscription = this.notificationService.notification$ .subscribe( (message: NotificationMessage) => { if (this.messages.length < 3) { this.messages.push(message); this.timeoutMessage(); } else { this.messagesQueue.push(message); } } ) } private timeoutMessage() { setTimeout(() => { this.messages.shift(); if (this.messagesQueue.length > 0) { this.messages.push(this.messagesQueue.shift()); this.timeoutMessage(); } }, 3000); }中的timeoutMessage()对象将被移到message数组。

但是我觉得这个解决方案并不优雅。是否有RxJS方式以某种方式延迟某些messagesQueue运算符的消息？

Answer 1

您可以使用 delay 运算符或条件延迟 delayWhen 根据条件进行延迟

import {delay} from 'rxjs/operators';

this.notificationService.notification$.pipe(
  delay(3000)
).subscribe();

带有 delayWhen

的示例

this.notificationService.notification$.pipe(
  delayWhen(message => this.messages.length < 3 ? interval(0) : interval(3000))
).subscribe();

Answer 2

您可以使用BufferCount运算符执行此操作。它将一次发出3的值，并且我添加了第二个延迟以确保确定。

import {bufferCount,delay } from 'rxjs/operators';

this.notificationService.notification$.pipe(
  bufferCount(3),delay(3000)
).subscribe();

这是一堆example：

RxJS：延迟传入的可观察变量

2 个答案: