rxjs: поток всплывающих окон

Question

Я должен показать N количество загрузочных всплывающих окон один за другим пользователю.В настоящее время у меня есть поток сообщений, которые будут отображаться в каждом всплывающем окне.Если я сделаю простую подписку и покажу сообщение, он не будет ждать, пока пользователь отклонит всплывающее окно и либо вызовет show('modal') несколько раз, либо изменит сообщение, чтобы показать пользователю только последнее.

Oneсумасшедшая идея - добавить задержку на уведомление с помощью оператора debounce и надеяться, что мозг пользователя синхронизируется с вашей задержкой.

Я думал о создании потока уведомлений с функцией обратного вызова для принимающей стороныдайте мне знать, если уведомление было использовано.

export class CallbackNotification<T>  {
  parameter : T;
  callbackFunction: () => any;
}

export function notifyAndMoveNext<T>(source: Observable<T>)  : Observable<CallbackNotification<T>>  {
  let notifications = new BehaviorSubject<any>(0);
  return
 zip(source, notifications)
   .pipe(map(([a, n]) => <CallbackNotification<T>> { 
               parameter = a, 
               callbackFunction = () => notifications.next(0) 
     }));
}

тогда я могу просто сделать

notifyAndMoveNext(myMessagesObservable).subscribe(x => { this.currentNotification = x.callbackFunction; showModal(x.parameter); });

и в обработчике событий кнопки всплывающего окна

this.currentNotification();

Вышеприведенное не будет работать для совместного использования подписок (publish и refCount). Есть ли что-то еще, что кто-то видит неправильно, чего я не вижу?Ребята, вы предлагаете альтернативу?

Answer 1

Решение состоит в том, чтобы превратить каждое уведомляющее сообщение в Наблюдаемое (или Обещание), которое не завершается, пока пользователь не отклонит уведомление.Тогда просто используйте concatMap.concatMap будет ожидать завершения предыдущего сообщения, прежде чем подписаться на следующий

Вот пример:

const showNotification = (notification) => {
    // return a "cold" observable using RxJS defer function
    // so that the notification is not shown until
    // we are subscribed
    return defer(() => new Promise(resolve => {
        // when popup calls this.currentNotification() resolve the promise
        this.currentNotification = resolve;
        showModal(notification);
    }));
};

notifications.pipe(concatMap(showNotification)).subscribe();