需要解释 ng-template 中的 let-* 指令

Question

我是角度新手，现在正在使用一些遗留代码。在一个组件中有一个带有 let 循环的表。在网上查了一下，但不太理解。

<ng-template #itemTmpl let-data let-element="element">
  <ng-container *ngIf="data === 'route'"> {{ currentRouteSubject.value.number }} </ng-container>
  <ng-container *ngIf="data === 'name'">
    <ng-container *ngIf="!editRouteScheduleMap.has(element.id)"> {{ element[data] }} </ng-container>
    <ng-container *ngIf="editRouteScheduleMap.has(element.id)">
      <input type="text" [(ngModel)]="editRouteScheduleMap.get(element.id).name" />
    </ng-container>
  </ng-container>
  <ng-container *ngIf="data === 'requiredBusAmount'">
    <ng-container *ngIf="!editRouteScheduleMap.has(element.id)"> {{ element[data] }} </ng-container>
    <ng-container *ngIf="editRouteScheduleMap.has(element.id)">
      <input type="text" [(ngModel)]="editRouteScheduleMap.get(element.id).requiredBusAmount" />
    </ng-container>
</ng-template>

你能解释一下这个 let-data, let-element='element' 以及它如何与源文件连接

Answer 1

let-* 属性是 ng-template 的一项功能，用于通过从上下文中获取变量的值来将变量注入到模板中。

<ng-template let-data="sometext">
      <span>{{data}}</span>
</ng-template>

也许您可以查看这篇文章以了解更多信息