如何在 ngBootstrap 和 Angular 中监听模式的关闭事件？答案

【问题标题】：How to listen the close event of a modal in ngBootstrap and Angular?如何在 ngBootstrap 和 Angular 中监听模式的关闭事件？
【发布时间】：2021-03-14 00:33:52
【问题描述】：

我正在尝试使用 ngbootstra 订阅模式的关闭事件，但我不明白它是如何工作的。我有 2 个组件，第一个用于启动模态，第二个在内部。

第一个

html

<button class="btn btn-lg btn-outline-primary" (click)="open()">Launch demo modal</button>

import { OtherComponent } from './../other/other.component';
import { Component, OnInit } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap/modal/modal.module';

@Component({
  selector: 'app-joker',
  templateUrl: './joker.component.html',
  styleUrls: ['./joker.component.scss']
})
export class JokerComponent {
  constructor(private modalService: NgbModal, private activeModal: NgbActiveModal) { }

  open(): void{ 
    const modalRef = this.modalService.open(OtherComponent, {centered: true});
    modalRef.componentInstance.name = 'Gerardo';
  }
}

第二次

html

<div class="modal-header">
  <h4 class="modal-title">Hi there!</h4>
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <p>Hello, {{name}}!</p>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>

import { Component, Input} from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-other',
  templateUrl: './other.component.html',
  styleUrls: ['./other.component.scss']
})
export class OtherComponent {

  @Input() name: any;
  constructor(public activeModal: NgbActiveModal) { }
  

}

但是我不知道如何进行订阅，因为它说 close 方法不是可观察的，我也喜欢知道当模式在第二个组件（第二个）中关闭时如何发出任何值有人知道吗？怎么办？

顺便说一句，有必要取消订阅吗？

【问题讨论】：

Gerakt，你传入的 clised 数据是函数 activeModal.close('Close click')`` 的参数。在这种情况下只是一个字符串，您可以在 .ts 中使用，例如this.activeModal.close({lastName:'lastName',firstName:'firstName'}) 并获取promise中的值

标签： angular typescript ng-bootstrap angular2-observables

【解决方案1】：

在其他组件

<button type="button" class="btn btn-outline-dark" (click)="close()">Close</button>
    
    
    close() {
        this.activeModal.close("Send data")
      }

所以你可以从父组件订阅这个

在JokerComponent

中

    open(): void{ 
        const modalRef = this.modalService.open(OtherComponent, {centered: true});
        tempModal.afterClosed().subscribe(data => {
              console.log(data)
              if(data){
                  // you can check if the modal returns any data or not
              }
        })
      }

【讨论】：

【解决方案2】：

您可以访问modalRef 的result 变量，因为它返回一个Promise，即

modalRef.result.then((data) => {
  // on close
},
(error) => {
  // on error/dismiss
});

有关详细信息，请参阅documentation。

您无法订阅 close 方法的原因是它返回 void 而不是 Observable（也在文档中列出）。

一般来说，我个人会将 open 和 close 方法移至服务，以便您的其他组件（应该监听 close 事件的组件）可以访问 modalRef 变量。

【讨论】：

记得在 promise 中使用then((data)=>{...},(error)=>{...})。在 ngb-bootstrap 模态中，您是使用“关闭”还是在外部单击关闭，最后一部分 - 错误 - 被弹出。如果你不处理错误（你什么都做不了，但你需要声明），Angular 会给你一个错误