Angular2：Modal對話框沒有捕捉到關鍵事件

Question

我正在關注modal dialog的解決方案以及下面的註釋。由於他們是這麼多我決定爲清晰起見，我有改編版本的新問題：

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' 
     }, 

隨着上述變化（和udpated代碼）我仍然有問題得到第一個前面的第二個模態對話框。提示？

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

您不包括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

Answer 3

我的應用程序中重用的模式組件的詳細信息的原因這個帖子的原作者，抱歉的延遲，也許它不是太晚:)

1）不太確定你在這裏的意思 2）我自更新了答案，能夠一次顯示多個模態。