Lassen Sie uns über Vorlageneingabevariablen (Let-Variablen) in Angular sprechen

Ich bin jemand, der Artikel schreibt oder über seine Erfahrungen spricht. Ich kopiere nicht gerne Dinge direkt von der offiziellen Website. Ich schreibe immer noch gerne Artikel in meiner Landessprache. Ich habe heute lange auf der offiziellen Website über Vorlageneingabevariablen gelesen und endlich eine vorläufige Vorstellung davon bekommen, was das ist. [Verwandte Tutorial-Empfehlung: „Angular-Tutorial“]

Was genau sind Vorlageneingabevariablen

Der Grund, warum ich dieses Ding studieren möchte, ist, dass ich bei der Verwendung von ng-zorro zuvor dessen Paging verwendet habe Komponente Paginierung（Offizieller Website-LinkPagination（官网链接）。这其中有一个自定义上一页下一页模板的功能。代码的话如下：

@Component({
  selector: 'nz-demo-pagination-item-render',
  template: `
    <nz-pagination [nzPageIndex]="1" [nzTotal]="500" [nzItemRender]="renderItemTemplate"></nz-pagination>
    <ng-template #renderItemTemplate let-type let-page="page">
      <ng-container [ngSwitch]="type">
        <a *ngSwitchCase="&#39;page&#39;">{{ page }}</a>
        <a *ngSwitchCase="&#39;prev&#39;">Previous</a>
        <a *ngSwitchCase="&#39;next&#39;">Next</a>
        <a *ngSwitchCase="&#39;prev_5&#39;"><<</a>
        <a *ngSwitchCase="&#39;next_5&#39;">>></a>
      </ng-container>
    </ng-template>
  `
})
export class NzDemoPaginationItemRenderComponent {}

看完这个之后我就很是疑惑，这个let是啥，为啥let-跟上一个变量之后就有值了呢？然后我就开始在官网中找这个let是什么东西。最终，我在主要概念-指令-结构性指令的微语法一节找到了关于let的说明。官网描述：微语法。

在下面还有一段简短的说明：

模板输入变量（Template input variable）

模板输入变量是这样一种变量，你可以在单个实例的模板中引用它的值。 这个例子中有好几个模板输入变量：hero、i 和 odd。 它们都是用 let 作为前导关键字。

......

你使用 let 关键字（如 let hero）在模板中声明一个模板输入变量。 这个变量的范围被限制在所重复模板的单一实例上。 事实上，你可以在其它结构型指令中使用同样的变量名。

......

官网还是一如既往的不说人话，短短几句话就给你介绍完了，也不告诉你这玩意怎么用，也不告诉你let声明的变量的值到底是从哪里来的。我越看越气，得，官网你不说，我自己找。

先说一个粗略的结论：let声明的变量是这个template模板的上下文对象中的变量。不然为啥叫模板输入变量呢。在*ngFor内幕这小节中，我们了解到了其内幕，结构性指令其实就是将宿主元素包裹在一个<ng-template></ng-template>中，然后在这个模板上将*ngFor中的表达式解析成一个个的let模板输入变量和这个指令需要传入的值。由于模板中代码并不会直接被渲染成视图，所以一定需要某种方法来使模板变成视图。我们的结构性指令就是干这个事的，就是将我们的模板变成视图。

*ngFor的官方示例代码如下：

//解析前的模板
<div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd">
  ({{i}}) {{hero.name}}
</div>
//angular解析后的模板
<ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById">
  <div [class.odd]="odd">({{i}}) {{hero.name}}</div>
</ng-template>

• 在此提示一下，所谓的宿主元素就是指令所在的那个元素，像上面的例子中，div就是*ngFor指令的宿主元素。
• trackBy这个类似于vue和react中的key。可以给模板一个标识，使其重新渲染的时候性能开销降低一些。

然后我们再看官网说的：

• let-i 和 let-odd 变量是通过 let i=index 和 let odd=odd 来定义的。 Angular 把它们设置为上下文对象中的 index 和 odd 属性的当前值。
• 这里并没有指定 let-hero 的上下文属性。它的来源是隐式的。 Angular 将 let-hero 设置为此上下文中 $implicit 属性的值， 它是由 NgFor 用当前迭代中的英雄初始化的。

看完这段描述，我们可以得知：angular为这个模板设置了上下文对象。但是我们看不到这个过程，因为这是在ngFor的源码内部实现的。并且这个上下文对象具备index和odd属性，并且包含一个$implicit). Es gibt eine Funktion zum Anpassen der Vorlage für die vorherige Seite und die nächste Seite. Der Code lautet wie folgt:

{
    $implicit:null,
    index:null,
    odd:null,
}

@Directive({
  selector: '[appRepeat]',
})
export class RepeatDirective {
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef,
  ) { }

  @Input() set appRepeatOf(heroesList: string[]) {
    heroesList.forEach((item, index, arr) => {
      this.viewContainer.createEmbeddedView(this.templateRef, {
        //当前条目的默认值
        $implicit: item,
        //可迭代对象的总数
        count: arr.length,
        //当前条目的索引值
        index: index,
        //如果当前条目在可迭代对象中的索引号为偶数则为 true。
        even: index % 2 === 0,
        //如果当前条目在可迭代对象中的索引号为奇数则为 true。
        odd: index % 2 === 1,
      });
    });
  }
}

{
    $implicit:null,
    index:null,
    odd:null,
}

@Directive({
  selector: '[appRepeat]',
})
export class RepeatDirective {
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef,
  ) { }

  @Input() set appRepeatOf(heroesList: string[]) {
    heroesList.forEach((item, index, arr) => {
      this.viewContainer.createEmbeddedView(this.templateRef, {
        //当前条目的默认值
        $implicit: item,
        //可迭代对象的总数
        count: arr.length,
        //当前条目的索引值
        index: index,
        //如果当前条目在可迭代对象中的索引号为偶数则为 true。
        even: index % 2 === 0,
        //如果当前条目在可迭代对象中的索引号为奇数则为 true。
        odd: index % 2 === 1,
      });
    });
  }
}

@Component({
  selector: 'app-structural-likeNgFor-demo',
  template: `
    <h2>原神1.5版本卡池角色</h2>
    <h4>自定义ngFor（appRepeat）</h4>
    <ul>
      <li *appRepeat="let h of heroesList;let i = index;let even = even">
        索引：{{i}} -- {{h}} -- 索引值是否是偶数：{{even.toString()}}
      </li>
    </ul>
    <h4>真正的ngFor</h4>
    <ul>
      <li *ngFor="let h of heroesList;let i = index;let even = even">
        索引：{{i}} -- {{h}} -- 索引值是否是偶数：{{even.toString()}}
      </li>
    </ul>
  `,
})
export class StructuralLikeNgForDemoComponent {
  public heroesList: string[] = [&#39;钟离&#39;, &#39;烟绯&#39;, &#39;诺艾尔&#39;, &#39;迪奥娜&#39;];
}