如何在父组件中给Angular子组件传递自定义ng-template渲染列表项

你的问题出在子组件没有把循环的项和索引作为上下文传递给父组件的模板，导致父模板里的option和it找不到对应的变量。以下是修改方案，完全符合你不想在父组件写*ngFor、不想新增组件或映射字段的需求：

步骤1：修改子组件模板，传递上下文 #

更新list-box.component.html，给ngTemplateOutlet添加ngTemplateOutletContext，把当前循环的项和索引传进去：

<div *ngFor="let option of optionsList; index as it">
  <ng-container 
    [ngTemplateOutlet]="item"
    [ngTemplateOutletContext]="{ $implicit: option, it: it }"
  ></ng-container>
</div>

• $implicit是Angular模板的默认上下文变量，父模板里的let-option会自动接收这个值
• it: it是把循环的索引变量以it为键传递给父模板

步骤2：父组件模板接收上下文变量 #

更新parent.component.html，明确接收索引变量it：

<ng-template let-option let-it="it" #item>
  <label>{{it}}: {{option.name}}</label>
</ng-template>

<app-list-box
  [optionsList]="[{name: '选项A'}, {name: '选项B'}, {name: '选项C'}]"
  [item]="item">
</app-list-box>

• let-option对应子组件传递的$implicit变量（也就是当前列表项）
• let-it="it"对应子组件上下文里的it键（也就是循环索引）

这样修改后，父模板就能正确拿到每个列表项和对应的索引，不会再报变量未定义的错误，同时完全保留了你想要的“子组件负责循环、父组件自定义渲染模板”的逻辑。

内容的提问来源于stack exchange，提问作者Adora González