如何调用彼此依赖的多个subject.next()? [RxJS]

我有一个模式对话框服务。
对话框的每个实例都具有afterClose主题,此API用户可以订阅此对话框,以便在对话框关闭后执行某些操作。
现在,我想添加beforeclose主题,但是我不确定如何将其链接/组成我的Observables流。

关闭对话框也是异步的。

这大致上是这样的:

const asyncSimulation = val =>
  new Promise(resolve => resolve(val));

class DialogService {
  dialogs = [];

  open(text) {
    const afterClose = new rxjs.Subject();
    const onClose = new rxjs.Subject();
    const beforeclose = new rxjs.Subject();

    let dialog = new ModalDialog(text,onClose,afterClose,beforeclose);
    this.dialogs.push(dialog);

    onClose.subscribe(result => {
      this.remove(dialog).subscribe(() => {
        console.log("Closed " + result);
        afterClose.next(result);
        afterClose.complete();
      })
    })

   return dialog;
  }
  
  remove(dialog) {
    return rxjs.of(1)
  }
}

class ModalDialog {
constructor(text,beforeclose) {
  this.text = text;
  this.afterClose = afterClose;
  this.beforeclose = beforeclose;

  //private:
  this.onClose = onClose;
}

close(result) {
  this.onClose.next(result);
}

}

let dialogService = new DialogService();

let firstModal = dialogService.open("Modal 1");
let secondmodal = dialogService.open("Modal 2");

secondmodal.afterClose.subscribe((result) => console.log("After Close " + result));
secondmodal.beforeclose.subscribe((result) => console.log("Before Close " + result));

firstModal.close("Modal 1");
secondmodal.close("Modal 2");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.3/rxjs.umd.js"></script>

我已经在SO上阅读到,在subscribe中调用subscribe是一种不好的做法,但是我不确定如何编写适当的流来实现:

按以下顺序调用我的Observable的下一个功能: onClose 之前关闭 去掉 afterClose

我应该从beforeclose.next()返回observable并订阅吗?
感觉不对...

这样的事情怎么样?

  onClose.pipe(mergeMap(() => {
            return beforeclose
        })).subscribe((result => {
         this.remove(dialog).subscribe(() => {
            console.log("Closed " + result);
            afterClose.next(result);
            afterClose.complete();
  })
})
Grant_yin 回答:如何调用彼此依赖的多个subject.next()? [RxJS]

videos = [ { src: 'a.mp4',info: 'some text' },{ src: 'b.mp4',info: 'some other text' } ]; currentVideoIndex = 0; $('#nextVideo').click( function() { currentVideoIndex++; $('#videoElement').html('<source src="' + videos[currentVideoIndex].src + '">'); $('#startInfo').html( videos[currentVideoIndex].info ); if ( currentVideoIndex >= videos.length - 1 ) { $( this ).hide(); $( '#endButton' ).show(); } }); 应该首先真正被调用,您可能希望通过观察beforeClose流中的返回值来使接近可取消

beforeClose
本文链接:https://www.f2er.com/3165507.html

大家都在问