时间戳

首页 > 解决方案 > 在 Angular 模板中抽象属性表达式的正确方法

html - 在 Angular 模板中抽象属性表达式的正确方法

问题描述

重复表达

我在 Angular 6 中有以下组件模板。我重复a && (b || c)表达式 3 次，所以我想以某种方式抽象它。

父组件.html

<component
  [prop1]="1"
  [prop2]="a && (b || c)"
>
</component>

<component
  [prop1]="2"
  [prop2]="a && (b || c)"
>
</component>

<component
  [prop1]="3"
  [prop2]="a && (b || c)"
>
</component>

将其抽象为函数

我的第一个直觉是将它抽象为一个函数，一个定义模板的组件的方法。下面介绍的代码。

这种方法的问题在于性能。该函数被调用了几十次，即使a,b和c值没有改变。这个问题证实了我的担心。

父组件.ts

@Component(...)
class ParentComponent {

  (...)

  public prop2(): boolean {
    return this.a && (this.b || this.c);
  }

  (...)

}

父组件.html

<component
  [prop1]="1"
  [prop2]="prop2()"
>
</component>

<component
  [prop1]="2"
  [prop2]="prop2()"
>
</component>

<component
  [prop1]="3"
  [prop2]="prop2()"
>
</component>

问题

Angular（尤其是性能方面）抽象该a && (b || c)表达式的正确方法是什么？

标签： htmlangulartypescript

解决方案

如果您的情况非常简单test，那么您可以使用内联检查，但是如果您的情况很复杂，那么最好转到单独的功能。

inline性能方面和时尚不会有太大差异，function因为两者的执行量相同。在这两种情况下都没有额外的优化。

推荐阅读