Angular2：模态对话框不捕捉关键事件

Question

我正在关注modal dialog 和下面的 cmets 的解决方案。由于它们太多了，为了清楚起见，我决定制作一个新的 q 我有改编版：

import { Component, ViewChild } from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap';

@Component({
  selector: 'app-modal',
  template: `
  <div #myModal class="modal fade"   tabindex="-1" [ngClass]="{'in': visibleAnimate}"
       [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}">
    <div class="modal-dialog">
      <div class="modal-content" (click)="$event.stopPropagation();">
        <div class="modal-header">
          <ng-content select=".app-modal-header"></ng-content>
        </div>
        <div class="modal-body">
          <ng-content select=".app-modal-body"></ng-content>
        </div>
        <div class="modal-footer">
          <ng-content select=".app-modal-footer"></ng-content>
        </div>
      </div>
    </div>
  </div>
  `
})
export class ModalComponent {
  @ViewChild('myModal') public myModal: ModalDirective;

  public visible = false;
  private visibleAnimate = false;

  public show(): void {
    this.visible = true;
    setTimeout(() => this.visibleAnimate = true);
    document.body.className += ' modal-open';
  }

  public hide(): void {
    this.visibleAnimate = false;
    document.body.className = document.body.className.replace('modal-open', '');
    setTimeout(() => this.visible = false, 300);
  }

  public onContainerClicked(event: MouseEvent): void {
    if ((<HTMLElement>event.target).classList.contains('modal')) {
      this.hide();
    }
  }
}

我现在使用这种方法的主要问题是：

1. 键盘事件不会在模态对话框中捕获，而是发送到后面。如何预防？
2. 如评论部分所问：如何多次叠加对话框？即有一个模态对话框，例如编辑，而不是顶部的附加错误通知。这出现在后台...

编辑： 在检查了几个来源后，我发现了以下内容：

我需要安装ngx-bootstrap，添加app.module.ts

import { ModalModule } from 'ngx-bootstrap';
...
@NgModule({
  imports: [
    ...
    ModalModule
  ],

并添加systemjs.config.js

// ngx-bootstrap
        'ngx-bootstrap' : {
            format : 'cjs',
            main : 'bundles/ngx-bootstrap.umd.js',
            defaultExtension : 'js'
        },
        'moment' : {
            main : 'moment.js',
            defaultExtension : 'js'
        },

通过上述更改（以及更新的代码），我仍然无法在第一个模式对话框之前获得第二个模式对话框。提示？

Answer 1

以下代码

import { Component, ViewChild, Input } from '@angular/core';

@Component({
  selector: 'app-modal',
  template: `
  <div class="modal fade"   tabindex="-1" [ngClass]="{'in': visibleAnimate}"
       [ngStyle]="getStyle()">
    <div class="modal-dialog">
      <div class="modal-content" (click)="$event.stopPropagation();">
        <div class="modal-header">
          <ng-content select=".app-modal-header"></ng-content>
        </div>
        <div class="modal-body">
          <ng-content select=".app-modal-body"></ng-content>
        </div>
        <div class="modal-footer">
          <ng-content select=".app-modal-footer"></ng-content>
        </div>
      </div>
    </div>
  </div>
  `
})
export class ModalComponent {

  public visible = false;
  private visibleAnimate = false;
  @Input() public zIndex = 500;

  public show(): void {
    this.visible = true;
    setTimeout(() => this.visibleAnimate = true);
    document.body.className += ' modal-open';
  }

  public hide(): void {
    this.visibleAnimate = false;
    document.body.className = document.body.className.replace('modal-open', '');
    setTimeout(() => this.visible = false, 300);
  }

  public getStyle() {
    return {
      'z-index': this.zIndex,
      'display': this.visible ? 'block' : 'none',
      'opacity': this.visibleAnimate ? 1 : 0
    }
  };

}

允许我在下一个模板中设置 zIndex，例如 <app-modal [zIndex]=1000> - 这非常很好

解决了这个问题

Answer 2

我是那篇文章的原作者，抱歉耽搁了，也许还为时不晚:)

1) 不太清楚你在这里的意思 2) 我已经更新了该答案，以便能够一次显示多个模式。

Answer 3

您没有包含ModalDirective，这是您的键盘事件无法识别的原因

@Component({
  selector: 'app-modal',
  template: `/////////////////////
  <div class="modal fade" #myModal tabindex="-1" [ngClass]="{'in': visibleAnimate}"
       [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}">
    <div class="modal-dialog">
      <div class="modal-content" (click)="$event.stopPropagation();">
        <div class="modal-header">
          <ng-content select=".app-modal-header"></ng-content>
        </div>
        <div class="modal-body">
          <ng-content select=".app-modal-boddocument.body.className = document.body.className.replace('modal-open', ''); y"></ng-content>
        </div>
        <div class="modal-footer">
          <ng-content select=".app-modal-footer"></ng-content>
        </div>
      </div>
    </div>
  </div>
  `
})
export class ModalComponent {
@ViewChild('myModal') public myModal:ModalDirective; ////
  public visible = false;
  private visibleAnimate = false;

  public show(): void {
    this.visible = true;
    setTimeout(() => this.visibleAnimate = true);
    document.body.className += ' modal-open';
  }

  public hide(): void {
    this.visibleAnimate = false;
    document.body.className = document.body.className.replace('modal-open', ''); 
    setTimeout(() => this.visible = false, 300);
  }
}

有关如何在整个应用程序中重用模态组件的更多信息，请访问 answer