将Angular2模态添加到我的项目中

Question

Hy，我想在我的项目中添加一个Modal。我使用Angular-cli;我的Angular版本是2.1.0，Bootstrap：4

我尝试使用ng2-bootstrap和ng2-bs3-modal，但我没有找到一个简单的例子，所以我很困惑。

任何人都可以给我一个带有＆＃34; OK＆＃34;的角度模态的简单示例。和＆＃34;取消＆＃34;按钮，必须处理按钮上的事件。

Answer 1

如果您的目标是Angular 2和Bootstrap 4，我建议使用ng-bootstrap项目，它具有非常灵活的Modal实现：https://ng-bootstrap.github.io/#/components/modal

设置和使用非常简单，您可以在open服务上调用NgbModal方法的组件中打开模式：

@Component({
  selector: 'ngbd-modal-basic',
  templateUrl: 'src/modal-basic.html'
})
export class NgbdModalBasic {
  closeResult: string;

  constructor(private modalService: NgbModal) {}

  open(content) {
    this.modalService.open(content).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return  `with: ${reason}`;
    }
  }
}

正如你的问题评论中提到的，有几个例子，你甚至可以用自包含代码来分析掠夺者，例如：http://plnkr.co/edit/lM0GzDAqv0EYQ4qWit05?p=preview

Answer 2

尝试使用ng-window，它允许开发人员以简单的方式打开并完全控制单页面应用程序中的多个窗口，No Jquery，No Bootstrap。

https://github.com/BahgatMashaly/ng-window

Avilable Configration

• Maxmize window
• 最小化窗口
• 自定义尺寸，
• 自定义位置
• 窗口可拖动
• 是否阻止父窗口
• 是否将窗口置于中心
• 将值传递给chield窗口
• 将值从chield窗口传递到父窗口
• 在父窗口中收听关闭的chield窗口
• 使用自定义侦听器收听调整大小事件
• 以最大尺寸打开
• 启用和禁用窗口大小调整
• 启用和停用最大化
• 启用和停用最小化