使用转义键关闭 Angular 模态的问题

Question

I have a component Escrituracao to keep tab of a client's bills. It has this mat-table to show all the proper data. To create a new bill a modal, CadastrarLancamentoComponent, is opened:

openModalLancamento(data) {
    const modalOptions: NgbModalOptions = {};
    modalOptions.backdrop = 'static';
    const modalRef = this.modalService.open(CadastrarLancamentoComponent, modalOptions);
    modalRef.result.then((result) => {
      if (result) {
        this.getLancamentosByPeriod();
      }
    }, (result) => {
      if (result) {
        //escape result enters here
        this.getLancamentosByPeriod();
      }
    });
  }

When a new bill is added the modal is kept open to add more bills (that's intended). However, when closed with the close or cancel button, if a bill was added, the modal returns a specific result value enabling the page to refresh (thus calling this.getLancamentosByPeriod();). When using cancel or close button with no bill added, it only closes the modal without reloading.

My main struggle is when using the Escape key. When used, both when added or not a bill, it only closes the modal. The result is the same for both situations. I've tried using some Output data transfer to the Financeiro component to say a bill was added; and tried accessing the modal's data to fetch a boolean that would give me that information. All with no solution.

Is there a way to force a value on this modal result when closed with the escape key? Or to send this information proper (like used on the other close buttons) to the main page? What I need is the page to behave the same as the other closing buttons, to reload on close when a bill was added.

I'm using Angular/Typescript for this project.

Answer 1

Are you using material for your dialog, custom, or something else?

If it's material, then I believe there's and option to disable escape being used to close it.

Yeah, looked it up, disableClose is the option. That removes escape and clicking outside of the dialog as ways to close it.

Once disabled, put your own escape key listener in there - something like this I guess - and when escape is detected, directly call your desired, custom close method.