嵌套 event.subscribe 解决方案答案

【问题标题】：Nested event.subscribe solution嵌套 event.subscribe 解决方案
【发布时间】：2021-05-12 13:52:09
【问题描述】：

我正在使用 Angular dragula 拖放，它允许我在视图周围移动引导卡。当您“放下”某个项目时，它会触发 this.dragulaService.drop.subscribe()，在其中我可以在移动完成之前取消或回滚拖动的项目。

我想在那里使用我的模态。看起来像这样：让订阅 = this.modalService.onSubmit.subscribe((val) => {

该模态订阅保持线程等待用户在模态中单击“确定”或“取消”，显示“您确定要移动此项目吗？”

问题在于，水獭事件订阅（dragula）不等待模态事件订阅完成，dragula 只是在模态确认之前结束，这对我来说是个问题。因为当我尝试调用 drake.cancel 时，它不再存在。

代码：

    this.dragulaService.drop.subscribe(
        value => {
        let modal: ModalComponent = this.modalService.GetModal();
        let subscription = this.modalService.onSubmit.subscribe((val) => {
            //Here if user clicks OK, we do nothing and drag-drop finish successfuly
            //If user clicks Cancel, we call this.dragulaService.find('bag-deals').drake.cancel(true);

【问题讨论】：

它认为你必须先完成放置，然后显示模式，如果取消，则将项目移回原始容器。
谢谢你，mike，我几个小时前就在想那个，也许它比处理订阅和嵌套线程更容易。

标签： javascript angular typescript ecmascript-6 ng2-dragula

【解决方案1】：

你可以在管道中使用concatMap，这里有一篇关于Higher-Order RxJS Mapping Operators的有趣文章

我在你的情况下就是这样使用它的：

    let dropValue;
    this.dragulaService.drop
      .pipe(concatMap(value => {
        dropValue = value;
        const modal: ModalComponent = this.modalService.GetModal();
        return this.modalService.onSubmit;
      })).subscribe(value => {
         //Here if user clicks OK, we do nothing and drag-drop finish successfuly
         //If user clicks Cancel, we call this.dragulaService.find('bag-deals').drake.cancel(true);
    });

【讨论】：

是的，让我试试，我会告诉你它是否有效