模板中的模板输入和模板引用变量

我们使用 let 关键字创建模板输入变量，同时使用 #var 创建模板引用变量，其中 var 是变量的名称。 我们可以在模板中的任何位置引用模板引用变量。

模板输入变量的范围怎么样？它与模板引用变量的范围有何不同？有人可以通过例子帮助我理解吗？

<div *ngFor="let hero of heroes">{{hero.name}}</div> <!--hero is template input variable-->
<input #heroInput> {{heroInput.value}} <!--heroInput is template reference variable-->

模板上下文变量

当编译器解析时ng-template它标识的元素内容let-tplVar="ctxValue"令牌并创建绑定：

[variable that can be used inside the template] = "context variable"
[tplVar]                                        = "ctxValue"

上下文模板变量可以在模板内的任何位置使用。因此对于ngFor:

<div *ngFor="let hero of heroes">{{hero.name}}</div>

the hero变量将在ng-template:

<ng-template ngFor [ngForOf]="heroes" let-hero="$implicit">
  <div>{{hero.name}}</div>

模板变量

当编译器解析组件模板时，它会创建模板变量的绑定，并且可以在组件模板内的任何位置访问它们：

<input #heroInput>
<span>{{heroInput.value}}</span>

您还可以在内部使用模板绑定ngFor:

<input #heroInput>
<div *ngFor="let hero of heroes">{{hero.name}} and {{heroInput.value}}</div>

即使它没有在模板上下文中提供ngFor编译器生成以下内容更新渲染器 https://blog.angularindepth.com/the-mechanics-of-dom-updates-in-angular-3b2970d5c03d功能：

  function(_ck,_v) {
      var currVal_0 = _v.context.$implicit.name;         <---- read from context
      var currVal_1 = jit_nodeValue4(_v.parent,4).value; <---- read from template variable
      _ck(_v,1,0,currVal_0,currVal_1);
  });