modal-dialog - Angular 2.0 和模态对话框

Question

我试图找到一些关于如何在 Angular 2.0 中执行确认模式对话框的示例。我一直在使用 Angular 1.0 的 Bootstrap 对话框，但无法在 Web 上找到 Angular 2.0 的任何示例。我还检查了 Angular 2.0 文档，但没有运气。

有没有办法在 Angular 2.0 中使用 Bootstrap 对话框？

Answer 1

• Angular 2 及以上
• Bootstrap css(保留动画)
• 没有 JQuery
• 没有 bootstrap.js
• 支持自定义模态内容(就像接受的答案一样)
• 最近添加了对多个模态叠加的支持。

`

@Component({
  selector: 'app-component',
  template: `
  <button type="button" (click)="modal.show()">test</button>
  <app-modal #modal>
    <div class="app-modal-header">
      header
    </div>
    <div class="app-modal-body">
      Whatever content you like, form fields, anything
    </div>
    <div class="app-modal-footer">
      <button type="button" class="btn btn-default" (click)="modal.hide()">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </app-modal>
  `
})
export class AppComponent {
}

@Component({
  selector: 'app-modal',
  template: `
  <div (click)="onContainerClicked($event)" 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">
        <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;
  public visibleAnimate = false;

  public show(): void {
    this.visible = true;
    setTimeout(() => this.visibleAnimate = true, 100);
  }

  public hide(): void {
    this.visibleAnimate = false;
    setTimeout(() => this.visible = false, 300);
  }

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

要显示背景，您需要这样的 CSS:

.modal {
  background: rgba(0,0,0,0.6);
}

该示例现在允许同时使用多个模式。 (参见 onContainerClicked() 方法)。

对于 Bootstrap 4 css 用户，您需要进行 1 处小改动(因为 css 类名已从 Bootstrap 3 更新)。这一行:[ngClass]="{'in': visibleAnimate}" 应该改为:[ngClass]="{'show': visibleAnimate}"

为了演示，这是一个 plunkr