Question

我有一个模式对话框服务。
对话框的每个实例都具有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, onClose, afterClose, 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();
  })
})

Answer 1

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

如何调用彼此依赖的多个subject.next（）？ [RxJS]

1 个答案: