在Angular 5中将html传递给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包括module / viewChild：

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

模态的html（viewChild）：

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

Answer 2

阅读： 内容投影

您可以使用ng-containt：工作演示

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 ，它可以帮助您包含内容。