如何解决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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。