如何以编程方式打开模态组件？

Question

我想像模态服务一样以编程方式打开模态。这就是我在 angular 1 :

中的做法

uibModal.open({template:'url.html', controller: MyController}) 这样我就不需要向我的父屏幕添加模态 HTML 代码。

假设我有这个文件夹结构：

components
-- screen1
---- parent.component.ts
-- modal1
---- modal1.component.ts
---- modal1.template.html
-- modal2
---- modal2.component.ts
---- modal2.template.html

然后 parent.component.ts 我想打开 modal1

但是由于我打开的模式是动态的，所以我希望它像服务（或类似的东西）一样打开。所以我将信息传递给我的 parent.component 它应该打开哪个模式，然后使用模式服务（如 angular1）打开模式。

我该如何解决这个问题？

谢谢！

Answer 1

您可以使用 angular-ui/bootstrap 端口到 Angular 2，它的服务等同于 uibModal：https://ng-bootstrap.github.io/#/components/modal

它的用法等同于 Angular 1.x 版本——你只需调用服务上的 open() 方法即可！这是一个例子：

export class NgbdModalComponent {
  constructor(private modalService: NgbModal) {}

  open() {
    const modalRef = this.modalService.open(NgbdModalContent);
  }
}

这是一个活生生的例子：http://plnkr.co/edit/4pgz0My5Mnt4VoAkIsPa?p=preview

如何以编程方式打开模态组件？

How can I open a modal component programmatically?

ng2-bootstrap

angular