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