Angular 5 ngx-bootstrap 模态或一般模态，处理所有类型的关闭，包括 esc

Question

再次更新：

上下文：

我有一个可重用的模态组件，根据它在创建时收到的内容（时间轴组件）：

createNewTimelineItemModal(): Promise<Object> {
    return new Promise((resolve) => {
      const initialState = {
        title: 'Add',
        multipleChoice: 'Bid <i class="fa fa-telegram"></i>',
        choices: [
          'Bid <i class="fa fa-telegram"></i>',
          'D.C. <i class="fa fa-bandcamp"></i>',
          'Kick-off <i class="fa fa-grav"></i>'],
        accceptBtnName: 'Add',
        closeBtnName: 'Cancel',
      };
      this.bsModalRef = this.modalService.show(Modal, {initialState});
      this.bsModalRef.content.onClose.subscribe(result => { 
        resolve(this.createItemResult = result);
      })
    });
  }

  errorTimelineItemModal(): Promise<Object> {
    return new Promise((resolve) => {
      const initialState = {
        title: 'Sorry',
        list: ['Sorry, for the moment, creating or moving items to weekends is disabled.']
      };
      this.bsModalRef = this.modalService.show(Modal, {initialState});
      this.bsModalRef.content.onClose.subscribe(result => { 
        resolve(this.createItemResult = result);
      })
    });
  }

...可以做一些事情，从创建具有自定义名称的项目到简单地通知用户错误。

这些模态被称为（时间线组件）：

onUpdate: (item, callback) => {
      if(this.timeline.getCurrentTime() < item.start){
        this.updateTimelineItemModal(item.content).then((res) => {
        if( res['valid']){
          item.content = res['update'];
          callback(item);
        } else callback(null);
        });
      }
    },

或者在更简单的情况下（时间线组件）：

 this.errorTimelineItemModal().then((res) => {this.errorModalOpen = false});

如您所见；对这些模态的生命终结采取行动是我调用组件特权的一部分。

我确保在模态生命周期结束时提供一个承诺（模态 html）：

<div class="modal-header">
  <h4 class="modal-title pull-left">{{title}}</h4>
  <button type="button" class="close pull-right" aria-label="Close" (click)="onCancel()">
        .....[some Modal content].....
  <div *ngIf="closeBtnName || accceptBtnName" class="modal-footer">
    <button *ngIf="closeBtnName" type="button" class="btn btn-airbus" (click)="onCancel()">{{closeBtnName}}</button>
  </div> 
</div>

（模态组件）：

  onCancel() { // notice v this !!!
    this.onClose.next(this.answer);
    this._bsModalRef.hide();
  }

有五种不同的方法可以关闭模​​态，其中一些可以正确发出 promise，有些不能：

1. 单击验证按钮（如果存在）（将作为返回对象的一部分返回有效为真以及任何必要的值）
2. 单击取消按钮（如果存在）（将返回相同的对象，但有效值为 false，其他值为空）
3. 点击 esc 键（这曾经是未处理的；如：默认行为是关闭模式，这是可以的，但不会发出任何承诺，这要归功于这个答案：@987654322 @我现在正确地发出承诺）
4. 在模态框内单击（这会关闭模态框，到目前为止我的模态框还没有捕捉到，因此我不能告诉它调用我的onCancel()
5. 在模式外点击（相同）

我需要找到一种方法来完全捕获模式关闭并阻止它并改为触发我个人的取消方法。

我会满足于捕获这两种特定类型的点击。

PS：模态 html 中没有其他 (click)="" DOM 属性，然后是我向您展示的那些，所以它隐藏在 ngx-bootstrap 的 js 中。

Answer 1

转义键的Here you can see the implementation：

  @HostListener('window:keydown.esc', ['$event'])
  onEsc(event: any): void {
    if (event.keyCode === 27) {
      event.preventDefault();
    }

    if (this.config.keyboard) {
      this.dismissReason = DISMISS_REASONS.ESC;
      this.hide();
    }
  }

您可以像这样定义自己的侦听器，使用它只调用this.hide() 的信息，或者只运行与此行为异步的逻辑。

更新：处理外部点击，同样来自实现：

 @HostListener('click', ['$event'])
  onClick(event: any): void {
    if (
      this.config.ignoreBackdropClick ||
      this.config.backdrop === 'static' ||
      event.target !== this._element.nativeElement
    ) {
      return;
    }
    this.dismissReason = DISMISS_REASONS.BACKRDOP;
    this.hide(event);
  }

有趣的部分是event.target !== this._element.nativeElement。这部分决定点击是否在我们的外部。