在 Angular 4+ 中绑定属性/函数与变量是否不好？

Question

我试图了解绑定到角度模板中的函数与绑定到变量/表达式是否是一个不好的做法。有什么区别吗？

例如：

选项1

<span *ngIf="!!myForm.value && !!myform.errors && !!myForm.errors['required']" ...

相对

选项2

HTML
<span *ngIf="requiredError" ...

TS
get requireError() {
    return !!this.myForm.value && !!this.myform.errors && !!this.myForm.errors['required'];
}

据我所知，没有区别，两个表达式都会继续执行，在这种情况下，我总是会选择选项 2。但是，我不断被告知属性/函数绑定很糟糕，因为 Angular 添加了一个观察者，并且函数不断执行一直被执行。我的理解是，选项 1 也是如此。我真的很感激一些描述这一点的文章或文档链接，但在网上找不到太多。

具体来说，当使用 valid、touched、dirty（这些已经是getAngular 中的属性）时，我看不出它会有什么不同，除非 Angular 以某种方式神奇地以不同的方式处理这些属性。

我看到样式指南对此进行了简短的提及：https ://angular.io/guide/styleguide#put-presentation-logic-in-the-component-class

Answer 1

为了在全球范围内回答您的问题，在 Angular 中，您拥有在每次更改检测运行时都会评估的模板表达式（以将当前值与新值进行比较并了解 DOM 是否需要更新）。

例子：

<span *ngIf="expression"></span>
<div>{{ expression }}</div>
<div [class.myclass]="expression"></div>

您的表达式可以包含变量或函数调用，它对于调用频率或性能的角度没有任何影响：

myBoolean1 = true;
myBoolean2 = false;

<span *ngIf="myBoolean1 && !myBoolean2"></span>

是相同的：

myBoolean1 = true;
myBoolean2 = false;

getValue(): boolean {
    return this.myBoolean1 && !this.myBoolean2;
}

<span *ngIf="getValue()"></span>

（何时以及为何运行变更检测是另一个主题）

但在模板中使用函数调用被认为是一种不好的做法，因为通常，当团队在代码库上工作时，人们倾向于在这些函数中添加越来越多的计算，这逐渐导致全局性能问题。