angular - 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>

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

Answer 1

我相信您可以使用输入字段。所以在模态组件中类似:

Input() content;

然后简单地说:

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

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