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

Question

我想以编程方式打开模态，就像模态服务一样。我就是这样做的角度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