Question

我有一个AppComponent我有一个登录按钮。当用户点击登录按钮时，SigninComponent将作为模式弹出窗口打开。

如何在按钮点击时关闭打开的模式弹出窗口？

这是我的代码：

app.component.html

<ng-template #content let-c="close" let-d="dismiss">
  <app-signin></app-signin>
</ng-template>

app.component.ts

openModalPopup(content:string){
  this.modalPopup.open(content);
}

modalPopup.ts

constructor(private modalService: NgbModal) { }

open(content: string) {
    this.modalService.open(content,{ centered: true }).result.then((result) => {
        this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
        this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
}        
getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
        return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
        return 'by clicking on a backdrop';
    } else {
        return `with: ${reason}`;
    }
}

帮我解决这个问题。

Answer 1

模型弹出服务返回打开的弹出参考。

// popupRef : NgbModalRef;    
this.popupRef = this.modalService.open(content,{ centered: true });

然后使用返回的引用并关闭打开的弹出窗口。喜欢：

urClickMethod(){
 this.popupRef.close();
}

如何在按钮单击时关闭打开模式弹出窗口？

1 个答案: