Angular 2.0和Modal对话框?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (28)

我试图找到一些关于如何在Angular 2.0中做一个确认模式对话框的例子。我一直在使用Angular 1.0的Bootstrap对话框,并且无法在Web上找到Angular 2.0的任何示例。我也检查了角度2.0文档没有运气。

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

提问于
用户回答回答于
  • 角2和以上
  • Bootstrap css(动画保存)
  • 没有JQuery
  • NO 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次小改动(因为从Bootstrap 3更新了css类名称)。这一行: [ngClass]="{'in': visibleAnimate}"应改为: [ngClass]="{'show': visibleAnimate}"

用户回答回答于

这里有一个很好的例子,说明如何在GitHub的Angular2应用程序中使用Bootstrap模式。

它的要点是你可以将引导html和jquery初始化包装在一个组件中。我创建了一个可重用modal组件,允许你使用模板变量触发打开。

<button type="button" class="btn btn-default" (click)="modal.open()">Open me!</button>

<modal #modal>
    <modal-header [show-close]="true">
        <h4 class="modal-title">I'm a modal!</h4>
    </modal-header>
    <modal-body>
        Hello World!
    </modal-body>
    <modal-footer [show-default-buttons]="true"></modal-footer>
</modal>

你只需安装npm软件包并将模块模块注册到你的应用程序模块中即可:

import { Ng2Bs3ModalModule } from 'ng2-bs3-modal/ng2-bs3-modal';

@NgModule({
    imports: [Ng2Bs3ModalModule]
})
export class MyAppModule {}

扫码关注云+社区