Question

我正在关注modal dialog的解决方案以及下面的评论。因为它们太多了所以为了清晰起见我决定制作一个新的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代码），我仍然有问题在第一个模式对话框前面获得第二个模态对话框。提示？

Answer 1

我是那篇文章的原作者，对于延迟感到抱歉，或许还为时已晚：）

1）不太清楚你的意思 2）我已经更新了答案，可以一次显示多个模态。

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

以下代码

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
    }
  };

}

允许我在下一个模板中设置像<app-modal [zIndex]=1000>这样的zIndex - 它可以解决问题非常很好

Angular2：模态对话框不会捕获键事件

3 个答案: