我在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>
,a
和b
的值不变,该函数也会被调用数十次。 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>
表达式的正确方法是什么?
答案 0 :(得分:1)
如果您的test
非常简单,则可以使用内联检查,但是如果条件复杂,则最好移至单独的功能。
在性能方面,inline
和function
的方式不会有太大区别,因为两者执行所需的时间相同。两种情况都没有额外的优化。