时间戳

首页 > 解决方案 > ngx 模态没有以角度关闭

angular - ngx 模态没有以角度关闭

问题描述

我有一个从另一个组件调用的模式，但是当我按下 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>

确认模态组件：

export class ConfirmModalComponent implements OnInit {

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

  constructor(private modalService: BsModalService) { 
  }

  ngOnInit() {
  }

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

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

标签： angulartypescriptbootstrap-modal

解决方案

您可以在 getModalSubscriber 方法中发送/收听关闭事件。然后您可以在捕获关闭事件时调用 this.modalRef.hide() 。

推荐阅读