Angular2：模态对话框不捕获键事件(Angular2: Modal Dialog does not catch key-events)

 我正在按照模式对话框的解决方案和下面的评论。 因为它们太多了所以为了清晰起见我决定制作一个新的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();
    }
  }
}
 
 我现在使用这种方法的主要问题是： 
 
 
 
 键盘事件不会在模态对话框中捕获，而是发送到后向。 怎么预防这个？ 
 
 
 正如评论部分所述：如何多次叠加对话框？ 即，有一个模态对话框，例如编辑，而不是顶部的附加作为错误通知。 这出现在后台...... 
 
 
 编辑：检查几个来源后，我想出了以下内容： 
 
 我需要安装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'
        },
 
 通过上面的更改（以及udpated代码），我仍然有问题在第一个模式前面获得第二个模态对话框。 提示？ 

I'm following the solution for a modal dialog and the comments from below. Since they are so many I decided to make a new q for the sake of clarity I have the adapted version: 
 
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();
    }
  }
}
 
The main problem I have now with this approach are:
 
 
 
Keyboard-events are not caught in the modal dialog but rather sent to the backward. How to prevent this?
 
 
As asked in the comment section: How to overlay the dialog multiple times? i.e. to have a modal dialog for e.g. editing and than an additional on the top as Error-notification. This appears in the background...
 
 
EDIT: After checking several sources I figured out the following:
 
I need to install ngx-bootstrap, add in the app.module.ts
 
import { ModalModule } from 'ngx-bootstrap';
...
@NgModule({
  imports: [
    ...
    ModalModule
  ],
 
and add in the systemjs.config.js 
 
// ngx-bootstrap
        'ngx-bootstrap' : {
            format : 'cjs',
            main : 'bundles/ngx-bootstrap.umd.js',
            defaultExtension : 'js'
        },
        'moment' : {
            main : 'moment.js',
            defaultExtension : 'js'
        },
 
With the above changes (and the udpated code) I still have problems to get a second modal dialog in front of the first one. Hints?

原文：https://stackoverflow.com/questions/43390799