问题描述
我对 ngTemplateOutletContext 有一些困惑，特别是它是如何传递给 ngTemplate 的，或者是谁将它传递给 ngTemplate 的，它围绕着应用了 *ngFor 的元素。当我将其与方式进行比较时，当我们明确地传递哪个 ngTemplate 进行渲染时，混淆会增加。
这是我认为当我们显式传递模板时会发生什么 -
假设我们有一个 ngContainer / ngTemplate / ( Literally any HTML element as ngTemplateOutlet & ngTemplateOutletContext can be applied to any element)，现在我们选择明确提供我们之前创建的模板。像这样 -
<ng-template #temp let-number>
<p>{{number}}</p>
</ng-template>
然后我们将它传递给我们应用了 ngTemplateOutlet 和 ngTemplateOutletContext 的某个元素 -
<div [ngTemplateOutlet]="temp" [ngTemplateOutletContext]="{$implicit: 4}">
</div>
（我们应该在上面的操作中使用 ng-container，因为它不会在 DOM 中，但我在这里不关心。）
现在 temp ngTemplate 将在那里具有像这样的 div（或任何其他父容器）传递的上下文 -
我在这里的理解是，我们删除了 ng-template 中提供的 ngTemplateOutlet，并在 ngTemplateOutletContext 中传递了上下文。我们创建局部变量以在模板本身中使用。
问题
当我们使用 *ngFor like -
<p *ngFor="let number of data">
{{number}}
</p>
并按照以下方式对其进行脱糖 -
<ng-template #temp ngFor [ngForOf]="data" let-number>
<p>{{number}}</p>
</ng-template>
其中 data 文件中的 ts 变量是 data = [1,2,3]
The question is -
1.) 谁为这个去糖化的 ng-template 提供值（上下文），以便它能够将 let-number 绑定到 $隐式属性。我查看了 ngForOfContext ，在那里我发现提供了一些变量，这就是为什么我们能够像 even、index 这样绑定变量 -
<p *ngFor="let number of data; let i=index; let isEven=even">
但是在这种情况下，谁将这些变量提供给 ng-template。 （当我们显式传递模板时，父容器（此处为div）提供了我们之前看到的上下文）
2.) 当我们设置 ngForTemplate 时，它需要一个类型为 TemplateRef 的模板，如此处给出的-
将 p 与 *ngFor 指令一起使用允许它，但在使用 p 的脱糖版本时明确设置 ngFor 的引用不允许它，即 -
<ng-template #temp ngFor [ngForOf]="data" [ngForTemplate]="pTemplate" let-number>
pTemplate 在哪里 -
<p #pTemplate *ngFor="let number of data; let i=index; let isEven=even">
{{number}} {{i}} {{isEven}}
</p>
但它无法识别 ptemplate 中的 ngForTemplate 。如果它不能将 pTemplate 识别为有效的 ngForTemplate，它如何能够消除 p 版本中的 *ngFor？
PS：如果我在问题之前对 ng-template 的理解有误，我也很乐意更正。
解决方法
当我们使用 ngFor 指令时：
<ng-container *ngFor="let number of data;let i = index;let isEven=even">
<p [class.even]="isEven">{{i}} : {{number}}</p>
</ng-container>
内部 html 是一个 ng-template。 ngFor 指令为循环的每次迭代提供此模板的上下文。
正如您所指出的，ngFor 指令中有一个 ngForTemplate 输入。我们可以使用它来设置在 ngFor 内部 Html 之外声明的模板
<ng-template #pTemplate let-number let-isEven="even" let-i="index">
<p [class.even]="isEven">{{i}} : {{number}}</p>
</ng-template>
<ng-container *ngFor="let number of data;let i = index;let isEven=even;template: pTemplate">
</ng-container>
所以 ngFor 指令为这个模板提供了上下文。此上下文的类型为 ngForOfContext
我们可以通过自己提供上下文来将此模板与 ngTemplateOutlet 一起使用：
<ng-container *ngTemplateOutlet="pTemplate;context:{$implicit:43,even:true,index:2}">
</ng-container>
但是 *ngFor 语法是 ngTemplate 的语法糖。我们可以像这样在没有糖的情况下使用它：
<ng-template ngFor [ngForOf]="data" let-number let-isEven="even" let-i="index">
<p [class.even]="isEven">{{i}} : {{number}}</p>
</ng-template>
这里的 ng-template 仍然是每次迭代应用的模板。我们也可以通过提供上下文在 ngTemplateOutlet 中使用它：
<ng-template #templ ngFor [ngForOf]="data" let-number let-isEven="even" let-i="index">
<p [class.even]="isEven">{{i}} : {{number}}</p>
</ng-template>
<ng-container *ngTemplateOutlet="templ;context:{$implicit:43,index:2}">
</ng-container>
但是如果使用带有 ngForTemplate 输入的去糖语法，我们必须声明第二个 ng-template 元素。因为如果我们尝试将不带 * 的 ngFor 指令应用于 ng-template 以外的任何其他内容，我们就会得到一个错误。
如果我们查看 source code of the ngFor directive，我们可以看到它的构造函数中需要一个 templateRef。但是这个模板引用的值也是由 ngForTemplate 输入设置的。
所以我们需要写
<ng-template #pTemplate let-number let-isEven="even" let-i="index">
<p [class.even]="isEven">{{i}} : {{number}}</p>
</ng-template>
<ng-template ngFor [ngForOf]="data" [ngForTemplate]="pTemplate"></ng-template>
<!-- And we cannot write : -->
<ng-container ngFor [ngForOf]="data" [ngForTemplate]="pTemplate"></ng-container>
在这种情况下，我们有 2 个模板，但只使用了一个，因此我们放置 ngFor 的模板不需要上下文，它的唯一目的是能够调用 ngFor 指令。
希望这能回答您的问题。