Angular Elements：如何将模板传递给组件？

问题描述

我构建了一个 Angular 组件，用于在地图上显示一系列标记。当这些标记之一被点击时，将显示一个弹出窗口。这个弹出窗口的内容可以由我的组件的用户定义。

我通过接受 ng-template 作为 @Input 参数解决了这个问题。

<my-map
  [markers]="markers"
  [popupTemplate]="popupTemplate">
</my-map>

<ng-template #popupTemplate let-marker>
  <h1>{{marker.title}}</h1>
  <div>{{marker.subtitle}}</div>
</ng-template>

这很好用！但是现在我使用 Angular Elements 将此组件发布为 Web 组件。 Web Component 的模板部分如何解决？

解决方法

我看不出问题。好吧，通常你应该定义一个“默认模板”

在你的组件中，我想你有一个 *ngFor

<div *ngFor="let marker of markers">

    <ng-container *ngTemplateOutlet="template?template:defaultTemplate;
                        context:{$implicit:marker}" >
    </ng-container>
</div>

<ng-template #defaultTemplate let-marker>
  <h1>{{marker.title}}</h1>
  <div>{{marker.subtitle}}</div>
</ng-template>