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

时间:2018-11-14 10:19:43

标签: html angular typescript

重复表达式

我在Angular 6中具有以下组件模板。我将nx+1表达式重复3次,所以我想以某种方式对其进行抽象。

parent.component.html

a && (b || c)

将其抽象为函数

我的第一个直觉是将其抽象为一个函数,即定义模板的组件的方法。下面显示的代码。

此方法的问题是性能。即使<component [prop1]="1" [prop2]="a && (b || c)" > </component> <component [prop1]="2" [prop2]="a && (b || c)" > </component> <component [prop1]="3" [prop2]="a && (b || c)" > </component> ab的值不变,该函数也会被调用数十次。 this question证实了我的担心。

parent.component.ts

c

parent.component.html

@Component(...)
class ParentComponent {

  (...)

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

  (...)

}

问题

在Angular中(尤其是性能方面)抽象该<component [prop1]="1" [prop2]="prop2()" > </component> <component [prop1]="2" [prop2]="prop2()" > </component> <component [prop1]="3" [prop2]="prop2()" > </component> 表达式的正确方法是什么?

1 个答案:

答案 0 :(得分:1)

如果您的test非常简单,则可以使用内联检查,但是如果条件复杂,则最好移至单独的功能。

在性能方面,inlinefunction的方式不会有太大区别,因为两者执行所需的时间相同。两种情况都没有额外的优化。