Angular模板中如何使用变量作为对象键？

在TypeScript代码里，我们可以通过计算属性语法{[myProperty]: 5}用变量作为对象键，但Angular模板并不支持这种直接写法，以下是几种可行的解决方式：

方法1：在组件类中预先构建目标对象 #

直接在组件的TypeScript代码里提前组装好需要的queryParams对象，模板中直接引用该变量即可，这是最简洁且推荐的方式。

组件代码示例：

export class YourComponent {
  myProperty = 'id';
  // 预先构建带动态键的对象
  queryParams = { [this.myProperty]: 5 };
}

模板代码示例：

<div 
[routerLink]="../.." 
[queryParams]="queryParams">
Navigate to page...
</div>

方法2：通过组件类的方法动态生成对象 #

如果需要在模板中根据动态值生成对象，可以在组件类中定义一个方法，接收键名和值并返回对应的对象。

组件代码示例：

export class YourComponent {
  myProperty = 'id';

  buildDynamicParams(key: string, value: any) {
    return { [key]: value };
  }
}

模板代码示例：

<div 
[routerLink]="../.." 
[queryParams]="buildDynamicParams(myProperty, 5)">
Navigate to page...
</div>

注意：如果在列表循环等频繁触发变更检测的场景使用该方法，建议搭配纯管道或缓存结果，避免不必要的性能损耗。

方法3：利用ng-container临时定义变量（临时方案） #

如果只是简单场景下的快速测试，也可以通过ng-container结合*ngIf临时定义包含键和值的对象，再在模板中使用：

<ng-container *ngIf="{ key: myProperty, value: 5 } as tempParams">
  <div 
  [routerLink]="../.." 
  [queryParams]="{ [tempParams.key]: tempParams.value }">
  Navigate to page...
  </div>
</ng-container>

这种写法不够直观，仅适合临时场景使用。

内容的提问来源于stack exchange，提问作者Rose Nettoyeur