Parsing ng template with let total in NZ Pagination

introduction

In the use of Ant design In the process , Discover paging components nz-pagination By setting nzShowTotal To show how much data there is in total let-total This way of writing , What's strange about me is that let-total An object that is not assigned a value , Where does its value come from ？

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

analysis

ng-template It belongs to the more advanced angular usage , It defines a template that does not render by default , It means that if we only define and do not use , Then it will not be displayed on the page like other elements , such as ：

<!--  The page will only show hello  instead of  hello world -->
<p>hello</p>
<ng-template>
	<p>world</p>
</ng-template>

that ng-template When will it be used ,

1. As TemplateRef Class to use
   For details, see ant design Created by service in Modal or drawer in use template Example , There is no talk here .
   
   ant design modal Example
2. Use as a template variable
   The question we raised at the beginning belongs to this kind of , Usually just contact ng-template when , The most used are ngIf else In the structural directive , This is easier to understand , What's the problem at the beginning ？

<p *ngIf="isTrue else falseTpl">
   Really? 
</p>
<ng-template #falseTpl>
  <p> fake </p>
</ng-template>

That's actually using ngTemplateOutlet and ngTemplateOutletContext Dynamic templates for implementation . Explain the first question , Simply speaking , Namely nz-pagination In component , There is a similar line of code

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

among totalTpl adopt Input Variables are passed in , Like this

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

[ngTemplateOutletContext] Represents the context of the template , It's an object , The key of the object will be available for the local template let Declared binding , It uses $implicit Set the key value in the context object to the default value , That is to say, it corresponds to the question at the beginning let-total.

summary

There are some doubts about this ant design The document does not clearly explain the reason , After all, I don't know what the default value of its dynamic template is without looking at the source code . The main reason is that I am not familiar with the use of dynamic templates .

Reference material ：

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