避免html重复

Question

我有下面的html，params.formGroup.controls[params.fieldName].value在ngbTooltip中重复，看起来很难看，有没有办法重写那一行以避免params.formGroup.controls[params.fieldName].value的重复？

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

Answer 1

您可以尝试将*ngIf指令的as构造与<ng-container>元素一起使用。

1. <ng-container>在最终DOM中被注释掉，因此不会导致膨胀
2. 请注意，现在您正在隐式检查是否定义了params.formGroup.controls[params.fieldName].value

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

从Angular v12.0.0(#36528(中，您还可以使用零合并运算符(??(而不是三元运算符

<svg [id]="params.id"
[ngbTooltip]="allTrans[fieldName] ?? fieldName"
container="body"
triggers="manual"
>
</svg>