如何在Angular的ng-template let定义中使用动态计算的变量值

问题根因 #

let-xxx="属性名"是ng-template的上下文变量声明语法，等号右侧的取值是固定的静态字符串，对应上下文对象的属性名，不支持Angular的插值、动态绑定语法，因此直接传入组件中的字符串变量不会生效。

解决方案 #

你已经通过let-item="item"拿到了模板上下文传入的item对象，直接在组件内定义方法处理item即可实现动态计算，具体实现如下：

1. 在component.ts中定义计算逻辑

// 可以直接写固定计算逻辑，也支持动态读取属性路径
computedPath = 'parent.name'; // 你可以任意修改这个路径变量实现动态取值

// 简易路径解析方法，不需要额外依赖
private getByPath(obj: any, path: string) {
  return path.split('.').reduce((current, key) => current?.[key], obj);
}

// 暴露给模板调用的方法
getInsideSubItemTop(item: any) {
  // 这里可以写任意你需要的计算逻辑
  return this.getByPath(item, this.computedPath);
}

2. 修改模板直接调用方法即可

<ng-template #topTemplate ng-label-tmp let-item="item" let-clear="clear"
  aria-autocomplete="none">
  
  <div class="badge badge-pill df-closable badge-blue">
    <!-- 直接调用组件方法传入item获取动态计算结果 -->
    {{getInsideSubItemTop(item)}}
    <button type="button" [badgeEventListener]="[clear, item]">
      <span aria-hidden="true" class="icon-times"></span>
    </button>
  </div>

</ng-template>

如果你的项目已经引入了lodash，可以直接替换getByPath方法为lodash的get方法，无需自己实现路径解析。

内容的提问来源于stack exchange，提问作者Mahesh G