ngx-bootstrap 模态内的 ngx-bootstrap 模态

Question

我正在开发一个 Angular 应用程序。 我有一个ngx-bootstrap模态，它又是从“父”引导模态启动的。 也就是说，它是嵌套在另一个模态中的模态。

关闭模态的代码行是： this.bsModalRef.hide() 。

问题是，当我单击一个按钮触发执行该行代码的函数时，它可以完美运行，但是，最大的问题是当我执行同一行代码以关闭子模态时这个关闭了，但是父模态失去了close的能力，即使点击了执行关闭模态的这行代码的Close按钮。

这是关闭第一个（“父”）BsModalRef 模式的按钮：

 <button class="btn btn-oval btn-sm ml-2"
        (click)=" closeModal()"
        type="button">
        Close
      </button>

这是 .ts 文件中的函数，它使“关闭”按钮关闭第一个模式：

  closeModal() {
    this.bsModalRef.hide();
  }

现在，第二个模态也必须有一个选项来关闭它并返回到前一个模态，就像在第一个模态中一样，它也有一个关闭按钮，它也执行此操作以返回主屏幕：

closeModal() {
    this.bsModalRef.hide();
  }

它有效地关闭了第二个模式，但是当尝试关闭第一个模式以返回到主屏幕时，此关闭按钮停止工作并且无法关闭它。

为什么会这样？ 有什么建议吗？

谢谢。

Answer 1

问题是您在子组件和父组件 BsModalRef 命名中使用“bsModalRef”名称，将其中一个更改为不同的名称。