Javascript 在*ngFor的情况下，是什么为ngTemplate提供了上下文？

我对

ngTemplateOutletContext

有些困惑，特别是它是如何传递给

ngTemplate

的，或者是谁将它传递给

ngTemplate

，它围绕着应用了

*ngFor

的元素。当我将它与方式进行比较时，当我们显式地传递要渲染的

ngTemplate

时，这种混乱就会加剧

下面是我认为当我们显式地传递模板时会发生的情况-

假设我们有一个

ngContainer

/

ngTemplate

/

（从字面上说，任何HTML元素如ngTemplateOutlet&ngTemplateOutletContext都可以应用于任何元素）

，现在我们选择显式地提供我们先前创建的模板。像这样-

<ng-template #temp let-number>
  <p>{{number}}</p>
</ng-template>

<div [ngTemplateOutlet]="temp" [ngTemplateOutletContext]="{$implicit: 4}">
</div>

（我们应该在上面的操作中使用

ng container

，因为它不在DOM中，但这里与我无关。）

现在，

temp

ngTemplate

将作为

div

（或任何其他父容器）所传递内容的上下文出现，如下所示-

<ng-template #temp let-number>
  <p>{{number}}</p>
</ng-template>

<div [ngTemplateOutlet]="temp" [ngTemplateOutletContext]="{$implicit: 4}">
</div>

我在这里的理解是，我们将

ngTemplateOutlet

中提供的

ng模板

去掉，并将上下文传递到

ngTemplateOutletContext

。我们创建用于模板本身的局部变量

---

问题

---

当我们使用

*ngFor

时-

<p *ngFor="let number of data">
  {{number}}
</p>

<p *ngFor="let number of data; let i=index; let isEven=even">

但是，在这种情况下，谁将这些变量提供给

ng模板

。（当我们显式传递模板时，父容器（

div

此处）提供了我们前面看到的上下文）

2。）当我们设置

ngForTemplate

时，它需要一个类型为

TemplateRef

的模板，如下所示-

将

p

与*ngFor指令一起使用可以允许，但在使用

ngFor

的除糖版本时，显式设置

p

的引用是不允许的，即-

<ng-template #temp ngFor [ngForOf]="data" [ngForTemplate]="pTemplate" let-number>

但是它不能识别

ngForTemplate

中的

ptemplate

。如果它不能将

pTemplate

识别为有效的

ngForTemplate

，它如何才能在

*ngFor

版本中消除

p

---

PS：如果我在提问之前对ng模板的理解不正确，我也会非常乐意纠正。

当我们使用ngFor指令时，如：

{{i}:{{number}

内部html是一个ng模板。ngFor指令为循环的每次迭代提供此模板的上下文

正如您所注意到的，ngFor指令上有一个ngForTemplate输入。我们可以使用它为内部Html设置在NGF外部声明的模板

{{i}:{{number}

因此ngFor指令提供了该模板的上下文。此上下文的类型为

ngForOfContext

通过提供自己的上下文，我们可以将此模板与ngTemplateOutlet一起使用：

但是*ngFor语法是ngTemplate的语法糖。我们可以在没有糖的情况下使用它，如下所示：

{{i}:{{number}

在这里，ng模板仍然是应用于每个迭代的模板。我们还可以通过提供上下文在ngTemplateOutlet中使用它：

{{i}:{{number}

但是如果对

ngForTemplate

输入使用去糖语法，我们必须声明第二个ng模板元素。因为如果我们尝试在ng模板之外的任何东西上应用ngFor指令而不使用*的话，我们会得到一个错误

如果我们看一下，就会发现它的构造函数中需要一个templateRef。但是这个模板ref的值也是由ngForTemplate输入设置的

所以我们需要写作

{{i}:{{number}

在本例中，我们有两个模板，但只使用了一个，因此我们放置ngFor的模板不需要上下文，它的唯一目的是能够调用ngFor指令

希望这能回答你的问题