写组件的时候,一般都有默认模板,但是很多时候希望组件可以接收自定义模板。
比如 ng-zorro项目中的 BackTop回到顶部 组件就支持自定义模板。
默认时可以使用<nz-back-top></nz-back-top>
。获得这个图标。
image.png
也可以通过
<nz-back-top [nzTemplate]="tpl" [nzVisibilityHeight]="100" (nzOnClick)="notify()">
<ng-template #tpl>
<div class="ant-back-top-inner">UP</div>
</ng-template>
</nz-back-top>
添加自定义模板。
image.png
核心是 ngTemplateOutlet
我们通过源码来看是如何实现的。 关键字 ngTemplateOutlet
image.png
image.png