Angular 2视图中如何缓存表达式值并复用？

当然可以！在Angular模板里，你完全可以把这个重复的长表达式存成一个局部变量复用，不用一遍遍写那么冗长的代码～给你两种最贴合你场景的方案：

方案一：利用*ngIf的as语法（最适合你的当前场景） #

你本来就用*ngIf来判断链接是否存在，刚好可以借助它的as语法直接把表达式结果赋值给变量，在当前元素的作用域内直接复用：

<a *ngIf="row.getEmployer()[i]!.getProfileLink() as link" class="x-view-link" href="{{ link }}"> xv </a>

这里的*ngIf不仅会判断getProfileLink()的结果是否为真（决定是否渲染这个<a>标签），还会把这个结果绑定到link变量上，你直接在href里用link就行，完全省去重复写长表达式的麻烦。

方案二：用ng-container封装（适合多元素复用变量） #

如果你需要在多个元素里复用这个变量，或者不想依赖*ngIf的条件判断（比如不管链接是否存在都要渲染元素），可以用ng-container来包裹——它是Angular提供的逻辑容器，不会生成额外的DOM节点：

<ng-container *ngIf="row.getEmployer()[i]!.getProfileLink() as link">
  <a class="x-view-link" href="{{ link }}"> xv </a>
  <!-- 这里还可以把link变量用到其他同级元素里，比如： -->
  <span>当前链接：{{ link }}</span>
</ng-container>

这两种方式都能帮你在模板内实现变量的局部复用，让代码更简洁易读～

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