将html传递给Angular 5中的viewChild

Question

我正在尝试将 html 传递给 viewchild，以便它可以将其添加到它自己的组件 html 中。直到现在我还没有找到如何解决这个问题的答案。 我对 Angular 完全陌生，所以我读过的大部分答案都是关于我不太了解的很多主题的，这让我很难。

父级正在使用 NgbModal (@ng-bootstrap/ng-bootstrap) 打开引导模式。由于我不想在整个项目中都为模态本身重复相同的代码，所以我想为它使用一个组件。模态组件（viewchild）正在工作，除了我无法将 html 传递给模态组件，因此它可以使用 html 填充模态体。

触发模态如下：

this.modalService.open(content, options).result;

有没有办法使用内部 html，例如：

<app-modal #modal>
    <img src="test.png" alt="test" />
</app-modal>

所以图像将是引导模式的内容。

Answer 1

我最终通过将包含的组件包装到 ng-template 中来修复它。

父组件的html，包括模块/viewChild：

<ng-template #imageFileModalContent let-c="close" let-d="dismiss">
    <app-modal>
        <img [src]="msgFile" />
    </app-modal>
</ng-template>

Modal 的 html (viewChild)：

<div class="modal-body form-group">
    <ng-content></ng-content>
</div>

Answer 2

阅读：Content Projection

你可以使用ng-containt : Working Demo

app-modal.component.html（选择器将是 app-modal）

<div class="dynamiccont">
    <ng-content></ng-content>
</div>

当你像这样使用这个组件时

<app-modal #modal>
  <img src="test.png" alt="test" />
</app-modal>

---

这对你有用，关键是利用ng-content，它可以帮助你包含内容。