借助nz-pagination中的let-total解析ng-template

导言

在使用Ant design过程中，发现分页组件nz-pagination通过设置nzShowTotal来展示一共有多少数据时使用了let-total这样的写法，我奇怪的点在于这个let-total没有被赋值的对象，那它的值又是从哪来的呢？

<nz-pagination [nzPageIndex]="1" [nzTotal]="85" [nzPageSize]="20" [nzShowTotal]="totalTemplate"></nz-pagination>
<ng-template #totalTemplate let-total> 共 {{ total }} 条数据 </ng-template>

解析

ng-template属于比较进阶的angular用法，它定义了一个默认不渲染的模板，意思也就是如果我们只定义而不使用，那么在页面上是不会像其他元素一样显示出来的，比如：

<!-- 页面上只会展示hello 
而不是 hello 
	  world 
-->
<p>hello</p>
<ng-template>
	<p>world</p>
</ng-template>

那ng-template会在什么时候使用呢，

1. 作为TemplateRef类实例来使用
   具体可以看ant design中通过服务方式创建Modal或drawer中use template的例子，此处不展开说。
   
   ant design modal例子
2. 作为模板变量使用
   开头我们提出的问题就属于这一种，平时刚接触ng-template时，使用最多的在ngIf else的结构性指令中，这种比较好理解，那开头提出的问题是怎么回事呢？

<p *ngIf="isTrue else falseTpl">
  真的
</p>
<ng-template #falseTpl>
  <p>假的</p>
</ng-template>

那其实是利用ngTemplateOutlet和ngTemplateOutletContext实现的动态模板。解释一下开头的那个问题，简单来说，就是nz-pagination组件内，有类似的这样一行代码

<!-- nz-pagination -->
<ng-container [ngTemplateOutlet]="totalTpl" [ngTemplateOutletContext]="{$implicit: nzTotal}"></ng-container>

其中totalTpl通过Input变量传进来，类似这样

/** nz-pagination **/
@Input() nzShowTotal: TemplateRef<{ $implicit: number;}>;
@Input() nzTotal: number = 10;

[ngTemplateOutletContext]表示模板的上下文，是一个对象，对象的键将可用于本地模板let声明的绑定，其中使用$implicit将上下文对象中的键值设置为默认值，也就是对应这开头所疑惑的let-total。

总结

这块产生疑惑有ant design文档没有说明清楚的原因，毕竟不看源码不知道它的动态模板的默认值是什么。还有主要就是对动态模板的使用不熟悉的原因。

参考资料：

1. https://angular.io/api/core/ng-template
2. https://angular.io/api/common/NgTemplateOutlet