ngx 模态未在 angular 中关闭

Question

i have one modal called from another component, but when i press the X button to close it doesnt work:

This is the button where i am calling the modal:

<button type="submit" id="submit-form" class="btn btn-primary" (click)="openConfirmModal()">Restaurar</button>

As you can see, i am calling the method openConfirmModal() from my actual component, which is calling the modal from another service component called password-reset.service.ts :

import { PasswordResetService } from './password-reset.service';
export class PasswordResetComponent implements OnInit {
  modalRef: BsModalRef;
  
  constructor(private modalService: BsModalService,
   private passwordResetService: PasswordResetService) { }

  openConfirmModal() {
    this.passwordResetService.confirmar("HECHO", "Datos verificados! Por favor, revise su bandeja de entrada...").subscribe((answer) => {});
  }

This is my password-service.ts :

import { ConfirmModalComponent } from './modals/confirm-modal/confirm-modal.component';
export class PasswordResetService {
  bsModalRef: BsModalRef;

  constructor(private bsModalService: BsModalService) { }

  public confirmar(title: string, message: string) : Observable<string> {
    const initialState = {
      title,
      message,
    };
    this.bsModalRef = this.bsModalService.show(ConfirmModalComponent, { initialState });
  
    return new Observable<string>(this.getModalSubscriber());
  }

  private getModalSubscriber() {
    return (observer) => {
        const subscription = this.bsModalService.onHidden.subscribe((reason: string) => {
            observer.complete()
        });

        return {
            unsubscribe() {
                subscription.unsubscribe();
            }
        }
    }
  }
}

Finally, this is the component who have the modal and where i am trying to call:

confirm-modal.component.html:

<div class="modal-header">
    <h4 class="modal-title">{{title}}</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="onClose()">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="modal-body">
    <div class="message-margin">
      <p>{{message}}</p>
    </div>
</div>

confirm-modal.component:

export class ConfirmModalComponent implements OnInit {

  title: string;
  message: string;
  modalRef: BsModalRef;

  constructor(private modalService: BsModalService) { 
  }

  ngOnInit() {
  }

  onClose() {
    this.modalRef.hide();
  }
}

Anyone can help me with this? thank you..

Answer 1

You can send/listen for a close event in your getModalSubscriber method. then you can call this.modalRef.hide() when the close event is captured.

Answer 2

Give click to close modal event to span rather than button

<div class="modal-header">
    <h4 class="modal-title">{{title}}</h4>
    <button type="button" class="close pull-right" aria-label="Close">
        <span aria-hidden="true" (click)="onClose()">&times;</span>
    </button> </div> <div class="modal-body">
    <div class="message-margin">
      <p>{{message}}</p>
    </div> </div>