angular - 在 Angular 4+ 中绑定(bind)到属性/函数与变量是不是很糟糕？

Question

我想了解绑定(bind)到 Angular 模板中的函数与绑定(bind)到变量/表达式是否是一种不好的做法。这有什么区别吗？

例如:

选项 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。但是，我一直被告知属性/函数绑定(bind)很糟糕，因为 angular 添加了一个观察者并且函数一直在执行。我的理解是，选项 1 也是如此。我非常感谢一些文章或文档链接描述这一点，在网上找不到太多。

具体来说，当使用 valid、touched、dirty(在 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>

你的表达式可以包含变量或函数调用，它对调用频率或性能的 Angular 没有任何影响:

myBoolean1 = true;
myBoolean2 = false;

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

等同于:

myBoolean1 = true;
myBoolean2 = false;

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

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

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

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