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';

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

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

1 个答案: