如何避免ngbTooltip中重复书写FormGroup控件取值的冗余代码

以下是3种不同场景下的优化方式，可按需选择：

方案1：直接简化表达式（无需修改其他代码，改动最小） #

你写的三元表达式本质是「前者存在就取前者，否则取后者」的逻辑，直接用逻辑运算符就能实现，省去重复取值：

<div class="svg-class">
    <svg [id]="params.id"
    [ngbTooltip]="allTrans[params.formGroup.controls[params.fieldName].value] ?? params.formGroup.controls[params.fieldName].value"
    container="body"
    triggers="manual">
    </svg>
</div>

这里用ES2020的空值合并运算符??替代||，可以避免0、空字符串等合法假值被误过滤的问题，如果项目不支持高版本ES语法，替换成||也可以正常使用。

方案2：模板内声明临时变量（完全消除重复取值） #

如果要彻底只写一次取值逻辑，可以用Angular的变量声明语法，不会额外生成DOM节点：

<div class="svg-class">
    <ng-container *ngIf="true; let fieldValue = params.formGroup.controls[params.fieldName].value">
        <svg [id]="params.id"
        [ngbTooltip]="allTrans[fieldValue] ?? fieldValue"
        container="body"
        triggers="manual">
        </svg>
    </ng-container>
</div>

这里用*ngIf="true"是为了避免取值为假值时，ng-container内部的内容不渲染的问题。

方案3：封装为组件方法（最易维护，适合复杂逻辑） #

如果后续tooltip的展示逻辑还有扩展需求，直接把逻辑抽到组件.ts中：

// 对应组件的ts文件
getFieldTooltip(params: any): string {
  const fieldValue = params.formGroup.controls[params.fieldName].value;
  return this.allTrans[fieldValue] ?? fieldValue;
}

模板直接调用方法即可，逻辑清晰易修改：

<div class="svg-class">
    <svg [id]="params.id"
    [ngbTooltip]="getFieldTooltip(params)"
    container="body"
    triggers="manual">
    </svg>
</div>

内容的提问来源于stack exchange，提问作者Brendan Crowley