Question

尝试使用模态对话框重新路由时，我的Angular4应用程序遇到了一些有趣的问题。

我的所作所为：

按钮单击我调用将显示模态对话框的函数：

public resetAndBack() {
let that = this;
this.modalProcess(this.cancelModal,
  function () {
    that.isNewVer = false;
    that.router.navigate(['/doc/search']);
  });
}

用于处理模态事件我有一个'通用'函数：

private modalProcess(instance: any, scssCb: Function, errCb?: Function) {
instance.open()
  .then(function (resultPromise: any) {
    resultPromise.result.then((result: any) => {
      scssCb();
      this.logger.i('modal ok');
    }, function() {
      if (errCb)
        errCb();
      this.logger.i('modal rejected');
    });
  });
}

为了清晰起见，我已将模态对话框封装到单独的类中：

export class CancelConfirmModal {

    ctx: any;

    constructor(context: any) {
        this.ctx = context;
    }

    public open() {
        let mod = this.ctx.modal.alert()
            .size('lg')
            .showClose(true)
            .title('Zrušit zmeny ?')
            .body(`
            <div class="container">
            <div class="row">
            <div class="col col-md-12">
                         <div>Zrušiť zmeny na dokumente ?</div>
</div>
</div>
</div>`)
            .open();

        return mod;
    }
}

这是在类构造函数中创建的，就像你猜的那样：

this.cancelModal = new CancelConfirmModal(this);

现在，点击'ok'后会发生什么？modal（调用scss回调）是应用程序被重新路由但垂直滚动条完全消失。在您可以在应用程序上导航的所有其他页面上。只是你不能滚动页面。它只会帮助刷新整个页面。

另一方面，当我省略modalProcess功能并在that.router.navigate(['/doc/search']);函数调用后立即调用resetAndBack时，它可以正常工作。

所以我希望你能告诉我一些技术上的进展情况，以及对于我想要达到的目标而言，这可能会更好。

你知道吗？感谢

Answer 1

您需要在重定向之前关闭模态窗口。这解决了我正在进行的项目中的相同问题。

从模态上下文路由时出现意外的滚动行为

1 个答案: