在 Angular 4+ 中绑定到属性/函数与变量是否很糟糕？

Posted 2023-02-23

【中文标题】在 Angular 4+ 中绑定到属性/函数与变量是否很糟糕？

【英文标题】：Is it bad to bind to properties/functions vs variables in Angular 4+?在 Angular 4+ 中绑定到属性/函数与变量是不是很糟糕？

【发布时间】：2020-01-27 09:48:18

【问题描述】：

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

例如：

选项 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

【问题讨论】：

检查这个：“为什么你不应该在 Angular 模板表达式中使用函数调用”，作者 Jurgen Van de Moere link.medium.com/gqzy8N1Gj0

【参考方案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>

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

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

【讨论】：

我有一个非常相似的例子，当我将一个函数绑定到模板中的一个属性时，它会被连续调用。当我将一个变量绑定到模板中的属性并在 ts 文件中的 ngInit 中设置该变量时，该函数只被调用一次。这是预期的行为吗？

【参考方案2】：

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

HTML：

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

TS：

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

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

【讨论】：

没关系，但是您如何查看更改以便在我们收到表单错误isError 时更新？您必须手动触发更新