避免html重复答案

【问题标题】：Avoid html repetition避免html重复
【发布时间】：2021-08-01 23:27:04
【问题描述】：

我有以下 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>

【问题讨论】：

我对 Angular 不是很流利，但一个想法是将其修改为 [ngbTooltip]=somefunction(params.formGroup.controls, allTrans)。如果此时你可以调用一个函数。
@LajosArpad：如果 OP 在其组件中使用默认更改检测策略，这将是一个坏主意。在这种情况下，每个更改检测周期都会触发该功能，并可能导致性能问题。请参阅此处了解更多信息：stackoverflow.com/a/45207623/6513921

标签： html angular

【解决方案1】：

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

<ng-container> 在最终的 DOM 中被注释掉，因此不会导致膨胀。
请注意，现在您正在隐式检查 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)，您还可以使用 nullish coalescing operator (??) 代替三元运算符

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

【讨论】：