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而不是

的更多详细信息