Angular中如何通过$implicit向递归模板传递多个参数？

嘿，我懂你碰到的麻烦了——你没法在context里重复用$implicit，因为JavaScript对象的键是唯一的，第二个$implicit会直接覆盖第一个，这就是为啥你的第二个参数拿不到！下面给你两种靠谱的实现方式：

方法一：使用自定义命名键（推荐） #

这是最清晰且易维护的方式，给每个参数定义独有的键名：

调用模板时的代码 #

<ng-container *ngTemplateOutlet="testTemplate; context: { json1: jsonObj1, json2: jsonObj2 }"></ng-container>

定义模板时的代码 #

你可以直接用let-加上对应的键名来接收参数：

<ng-template #testTemplate let-json1="json1" let-json2="json2">
  <!-- 在这里使用json1和json2 -->
  <p>第一个对象：{{ json1 | json }}</p>
  <p>第二个对象：{{ json2 | json }}</p>
</ng-template>

或者如果不想写重复的键名，也可以用简写（Angular会自动匹配键名和let后的变量名）：

<ng-template #testTemplate let-json1 let-json2>
  <!-- 同样可以访问json1和json2 -->
</ng-template>

方法二：将参数打包成单个对象/数组传递 #

如果你非要用$implicit，可以把两个参数合并成一个对象或者数组，这样只需要一次$implicit传递：

数组方式 #

调用时：

<ng-container *ngTemplateOutlet="testTemplate; context: {$implicit: [jsonObj1, jsonObj2]}"></ng-container>

模板接收：

<ng-template #testTemplate let-data>
  <!-- data[0]是jsonObj1，data[1]是jsonObj2 -->
  <p>第一个对象：{{ data[0] | json }}</p>
  <p>第二个对象：{{ data[1] | json }}</p>
</ng-template>

对象方式 #

调用时：

<ng-container *ngTemplateOutlet="testTemplate; context: {$implicit: { obj1: jsonObj1, obj2: jsonObj2 }}"></ng-container>

模板接收：

<ng-template #testTemplate let-data>
  <p>第一个对象：{{ data.obj1 | json }}</p>
  <p>第二个对象：{{ data.obj2 | json }}</p>
</ng-template>

总的来说，方法一的自定义命名键是最优解，因为它让代码可读性更强，后续维护也更方便，不会因为数组索引或者打包对象的结构变化而出错。

内容的提问来源于stack exchange，提问作者Uzair Khan