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

Question

I'm developing an Angular application. I have an ngx-bootstrap modal which in turn is launched from a "parent" bootstrap modal. that is, it's a modal nested in another modal.

The line of code to close the modals is: this.bsModalRef.hide() .

The thing is that it works perfectly when I click a button that triggers a function that executes that line of code, but, the big problem is when I execute the same line of code to close the child modal This one closes, but the parent modal loses the ability to close , even if hit the Close button which executes this line of code that closes the modal.

this is the button that closes the first ("parent") BsModalRef modal:

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

this is the function in the .ts file that makes the "Close" button closes the first modal:

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

Now, second modal also must have an option to close it and return to the previous modal, as in the first modal that also has a close button that also executes this to return to the main screen:

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

And effectively it closes the second modal, but when trying to close the first modal to return to the very main screen, this Close button stop working and there is no way to close it.

Why is this happening? Any suggestion?

Thanks.

Answer 1

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