Angular 2.0 和模态对话框 [英] Angular 2.0 and Modal Dialog

查看：24
本文介绍了Angular 2.0 和模态对话框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

解决方案

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

`

@Component({选择器:'应用程序组件'，模板:`<button type="button" (click)="modal.show()">test</button><app-modal #modal><div class="app-modal-header">标题

<div class="app-modal-body">无论您喜欢什么内容，表单字段，任何内容

<div class="app-modal-footer"><button type="button" class="btn btn-default" (click)="modal.hide()">关闭</button><button type="button" class="btn btn-primary">保存更改</button>

</app-modal>`})导出类 AppComponent {}@成分({选择器:'app-modal'，模板:`<div (click)="onContainerClicked($event)" class="modalfade" 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 class="modal-body"><ng-content select=".app-modal-body"></ng-content>

<div class="modal-footer"><ng-content select=".app-modal-footer"></ng-content>

`})导出类 ModalComponent {公共可见 = 假；公共可见动画 = 假；公开表演():无效{this.visible = true;setTimeout(() => this.visibleAnimate = true, 100);}公共隐藏():无效{this.visibleAnimate = false;setTimeout(() => this.visible = false, 300);}公共 onContainerClicked(事件:MouseEvent):无效{if ((event.target).classList.contains('modal')) {this.hide();}}}

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

.modal {背景:RGBA(0,0,0,0.6)；}

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

对于 Bootstrap 4 css 用户，你需要做 1 个小改动(因为一个 css 类名是从 Bootstrap 3 更新的).这一行:[ngClass]="{'in': visibleAnimate}" 应该改为:[ngClass]="{'show': visibleAnimate}"

为了演示，这里有一个 plunkr

I am trying to find some examples on how to do a Confirmation modal dialog in Angular 2.0. I have been using Bootstrap dialog for Angular 1.0 and unable to find any examples in the web for Angular 2.0. I also checked angular 2.0 docs with no luck.

Is there a way to use the Bootstrap dialog with Angular 2.0?

解决方案

`

@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();
    }
  }
}

To show the backdrop, you'll need something like this CSS:

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

The example now allows for multiple modals at the same time. (see the onContainerClicked() method).

For Bootstrap 4 css users, you need to make 1 minor change (because a css class name was updated from Bootstrap 3). This line: [ngClass]="{'in': visibleAnimate}" should be changed to: [ngClass]="{'show': visibleAnimate}"

To demonstrate, here is a plunkr

这篇关于Angular 2.0 和模态对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆