angular5中具有动态内容的可重用模态

Question

我有一个与其他几个组件一起使用的可重用模态组件。

我使用的模态框架来自ng-bootstrap (NgbActiveModal)。

模式只是列出了一组来自调用它的父组件的字符串。

但是，我希望模态显示取决于父组件。例如，我可能需要它来显示表格而不是列表。我是这样弄的：

<div class="modal-body">
  <div *ngIf="data.encoding !== undefined">
    <p>Hello {{data.name}}. These are your badly encoded words:</p>
    <ul><li *ngFor="let item of data.words">{{item}}</li></ul>
  </div>
  <div *ngIf="data.urls !== undefined">
    <p>Hello {{data.name}}. These are your broken urls:</p>
    <ul><li *ngFor="let item of data.urls">{{item}}</li></ul>
  </div>

这行得通，但它确实很丑陋并且完全依赖于父级的数据项。正确执行此操作的角度方法是什么？

Answer 1

我相信您可以使用输入字段。所以在模态组件中是这样的：

Input() content;

然后简单地说：

const modal = this.modalService.open(ModalComponent);
modal.componentInstance.content = 'something here';

在打开模式时添加所需的文本或其他内容。