模态不关闭

Question

parent 是 /new-order 组件

当我点击confirm时，显示模态

<div class="col-12">
  <button type="button" class="btn btn-primary m-1" (click)="openConfirmModal()">Confirmer</button>
</div>

方法如下：

openConfirmModal(): void {
    const modalRef = this.modalService.show(NewOrderConfirmModalComponent, {
        ...NOT_CLOSABLE_MODAL_OPTIONS,
        class: 'modal-dialog-centered modal-lg',
        ariaLabelledBy: 'modal-error-title',
        initialState: {
            orderToConfirm: this.order,
        }
    });
    modalRef.content!.closeModal.pipe(
        takeUntil(this.unsubscribe$)
    ).subscribe(() => {
        modalRef?.hide();
    });
}

enter image description here

现在，我在new-order-confirm-modal.component.html（孩子）

在 HTML 我有这个：

<button type="button" class="btn-close" aria-label="Close button" aria-describedby="modal-title" click="close()"></button>

这是我的 TS 文件

export class NewOrderConfirmModalComponent implements OnInit {
  @Input() orderToConfirm!:  Order;  
  private unsubscribe$ = new Subject<void>();
  @Output() closeModal = new EventEmitter<void>();

  
  constructor(
    public modal: BsModalRef,
    private router: Router,
    private location: Location,
    private service: NewOrderService
  ) { }
  
  ...
  
  close(): void {
    this.closeModal.emit();
  }

我的问题是，当我想关闭模式并单击十字时，没有任何反应...

编辑

import { EventEmitter } from '@angular/core';
import * as i0 from "@angular/core";
export declare class BsModalRef<T = any> {
    /**
     * Event that is fired when the modal behind the ref starts hiding
     */
    onHide?: EventEmitter<unknown>;
    /**
     * Event that is fired when the modal behind the ref finishes hiding
     */
    onHidden?: EventEmitter<unknown>;
    /**
     *  Allow user to ID for the modal. Otherwise, a unique number will be given
     */
    id?: number | string;
    /**
     * Reference to a component inside the modal. Null if modal's been created with TemplateRef
     */
    content?: T;
    /**
     * Hides the modal
     */
    hide: () => void;
    /**
     * Sets new class to modal window
     */
    setClass: (newClass: string) => void;
    static ɵfac: i0.ɵɵFactoryDeclaration<BsModalRef<any>, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<BsModalRef<any>>;
}

Answer 1

close(): void {
    this.modal.hide();
    this.closeModal.emit();
}

Answer 2

“按钮没有反应关闭模态”是因为你错过了点击事件的括号，请添加它们，它会起作用。

<button type="button" class="btn-close" aria-label="Close button" aria-describedby="modal-title" (click)="close()"></button>

模态不关闭

The modal does not close

angular

typescript

bootstrap-modal