Angular 组件动态传入模板

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

比如 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. 使用自定义模板