Angular2 ng-bootstrap : Reuse modal template with different data

Question

我正在构建一个类似仪表板的界面，其中包含一组包含可比较数据的实体。这些实体中的每一个都有一个编辑按钮，我想用它来打开一个显示相应数据的模式。

我想重复使用相同的模态模板，并显示来自单击编辑按钮的实体的数据。我将 Angular2 与 ng-bootstrap 结合使用，它依赖于 Bootstrap 4。

来自ng-bootstrap modal docs , 它伴随着 plunkr ，我能够像这样创建自己的工作模态组件(布局简化):

//editmodal.html

<template #content let-c="close" let-d="dismiss">
  //Modal html content
</template>

<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Edit</button>

---

//dashboard.html

<template ngbModalContainer></template>
<edit-modal></edit-modal>

---

//editmodal.component.ts

@Component({
  selector: 'edit-modal',
  templateUrl: 'entity/assets/templates/editmodal.html'
})

export class EditModal {
  //exported class logic
}

从以前的 Bootstrap 版本来看，最让我感到奇怪的是，打开模式的按钮现在显示在模板本身中，将其封装起来。这使得很难附加对它的引用，因此我可以从类逻辑中找出要显示的内容。我如何使用 Angular2 和 ng-bootstrap 实现这种行为？

Answer 1

您可以使用 NgbModal 服务从任何地方打开一个包含组件的模态窗口。

调用 this.ngbModalService.open(NgbdModalContent) 其中 NgbdModalContent 是您要在模式中显示的组件。

将组件作为内容 checkout :

https://ng-bootstrap.github.io/#/components/modal