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

Question

我们使用 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-->

Answer 1

模板上下文变量

当编译器解析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>

该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编译器未在模板上下文中提供它，也会生成以下updateRenderer函数：

  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);
  });