在 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 也是如此。我非常感谢一些描述此问题的文章或文档链接，在网上找不到太多内容。

具体来说，当使用有效的、触摸的、脏的（在 Angular 中已经是 get 属性）时，我看不出它会有什么不同，除非 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>

（更改检测运行的时间和原因是另一个主题）

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

Answer 2

我的意见，我觉得这样更好：

HTML：

<span *ngIf="isError"></span>

TS：

ngOnInit() {
   this.isError = this.requireError();
}

为什么？因为这里的函数只会被请求一次。 在你的版本中，第一个变体是合适的，但是模板中会有很多垃圾。在第二个变体中，函数可能会被多次请求。