Angular 使用ngTemplateOutlet动态传入模板

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

比如 ng-zorro项目中的 BackTop回到顶部 组件就支持自定义模板。
默认时可以使用。获得这个图标。

image.png

也可以通过

      
        
UP
      

添加自定义模板。

image.png

核心是 ngTemplateOutlet

我们通过源码来看是如何实现的。
关键字 ngTemplateOutlet

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

image.png

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

image.png

3. 使用自定义模板

image.png