将Angular2 Modal添加到我的项目中

Hy，我想为我的项目添加Modal。我正在使用Angular-cli;我的角版本是2.1.0，引导：4将Angular2 Modal添加到我的项目中

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

任何人都可以给我一个带有“OK”和“CANCEL”按钮的angular2模式的简单示例，它不必处理按钮上的事件。

来源

2016-11-04 Mourad Idrissi

https://ng-bootstrap.github.io/#/components/modal具有几个例子。但它使用ng-bootstrap，而不是ng2-bootstrap。 –

谢谢你，它的工作原理:) –

如果你的目标角2和Bootstrap 4我建议使用NG-引导项目女巫有一个非常灵活的模态实现：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}`; 
    } 
    } 
}

在你的问题中提到评论有几个例子，你甚至可以叉plunkers具有自包含的代码，例：http://plnkr.co/edit/lM0GzDAqv0EYQ4qWit05?p=preview

来源

2016-11-04 18:11:59

它工作正常。谢谢你（但是当我们添加一个自定义模式时，会遇到一些问题） –

-1

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

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