我们可以将html模板从angular2中的一个组件传递到另一个组件吗？

Question

假设我有一个可重用的基本组件CardComponent，即它将接受诸如1. DataArray 2. HTML模板（经过迭代）的输入。

因此，消费者组件将使用CardComponent选择器并传递dataArray和Template。

我该如何实现？ （通过htmltemplate）

Answer 1

您可以使用ng-content标签。

您的可重用组件（YOUR-REUSABLE-COMPONENT）模板就是这样。

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

在其他组件模板中使用可重用组件

<YOUR-REUSABLE-COMPONENT>
<div class="class1">
<h1>my main component</h2>
</div>
</YOUR-REUSABLE-COMPONENT>

Answer 2

是的，可以使用ng-content方法传递HTML模板，但是您应该始终使用模板方法。

您的.html文件->通用->

<div>
      <ng-container *ngTemplateOutlet="template"> </ng-container>
 </div>

您的.ts文件

    @ContentChild(TemplateRef)
    template: TemplateRef<any>;

以及要传递模板的其他组件文件 ：

<my-component>
     <ng-template> Your HTML Content </ng-template>
 </my-component>

有关为什么应考虑使用ng-template而不是的更多详细信息