ngx 模态未在 angular 内关闭

Question

我有一个从另一个组件调用的模式，但是当我按下 X 按钮关闭它时它不起作用:

这是我调用模式的按钮：

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

如您所见，我从我的实际组件调用方法 openConfirmModal()，它从另一个名为 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) => {});
  }

这是我的 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();
            }
        }
    }
  }
}

最后，这是具有模式的组件以及我要调用的组件：

确认-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>

确认-modal.component:

export class ConfirmModalComponent implements OnInit {

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

  constructor(private modalService: BsModalService) { 
  }

  ngOnInit() {
  }

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

任何人都可以帮助我吗？谢谢！

Answer 1

您可以 send/listen 在您的 getModalSubscriber 方法中关闭事件。然后您可以在捕获关闭事件时调用 this.modalRef.hide()。

Answer 2

将点击关闭模态事件赋予 span 而不是按钮

<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>

ngx 模态未在 angular 内关闭

ngx modal not closing in angular

typescript

bootstrap-modal

angular