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

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

1 个答案:

模板上下文变量

模板变量