我想了解绑定(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
最佳答案
为了在全局范围内回答您的问题,在 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>
(更改检测运行的时间和原因是另一个主题)
但在模板中使用函数调用被认为是一种不好的做法,因为通常,当团队在处理代码库时,人们很想在这些函数中添加越来越多的计算,这会逐渐导致全局性能问题。
关于angular - 在 Angular 4+ 中绑定(bind)到属性/函数与变量是不是很糟糕?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58128253/