Question

我已经创建了一条指令，以在按下Esc按钮时关闭模式。但是，当我有2个叠加模态时，我按Esc。我的两个模态都将关闭。理想情况下，应该只关闭最上面的（例如，确认模态）模态。可以一次在单个元素上执行指令。

以下是指令的代码段：

import {Directive, HostListener, Input} from '@angular/core';

@Directive({
  selector: '[appModal]',
})
export class ModalOperationsDirective {
  @Input() appModal;
  count: number = 0;

  @HostListener('document:keyup', ['$event']) handleKeyUp(event) {
    if (event.keyCode === 27) {
      this.appModal.close();
    }
  }
}

P.S .：我正在使用https://www.npmjs.com/package/ng2-bootstrap-modal库作为模态。

Answer 1

创建将成为您真理之源的服务：

export class ModalService {
  modals = [];

  openModal() {
   // Code to open a modal, then
   this.modals.push(modalRef);
  }

  closeLastModal() {
    const lastModal = this.modals.pop();
    lastModal.close();
  }
}

您的指令将如下所示

export class ModalDirective {
  constructor(private service: ModalService) {

  }

  @HostListener('window:keypress.escape', [$event])
  closeModal(event) {
    this.service.closeLastModal();
  }
}

允许Angular指令一次在单个元素上执行

1 个答案: