Skip to content

写组件的时候,一般都有默认模板,但是很多时候希望组件可以接收自定义模板。

比如 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

  1. 先看模板,ngTemplateOutlet 是一个指令,它接收模板变量,可以实现模板的动态渲染, 在这里,如果定义了 nzTemplate 变量就使用它,否则用默认的defaultContent。

image.png

  1. nzTemplate 是输入变量,类型是TemplateRef, 即模板引用。

image.png

  1. 使用自定义模板

image.png