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

Question

假设我有一个可重复使用的基本组件 CardComponent，即它将接受诸如 1. 数据数组 2. HTML模板(迭代)

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

我怎样才能实现它？(传递html模板)

Answer 1

是的，可以使用 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 而不是的更多详细信息

https://medium.com/michalcafe/angulars-content-projection-trap-and-why-you-should-consider-using-template-outlet-instead-cc3c4cad87c9

Angular 2 use a "template" for ng-content to use inside component loop