[英]Why does Angular produce 3 rather than 1 in the following simple code?
Why is the output 3 rather than 1 in the following code?为什么以下代码中的 output 是 3 而不是 1?
app.component.ts
: app.component.ts
:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
i: number =0;
get count(): number{
this.i++;
return this.i;
}
}
app.component.html
: app.component.html
:
<h1>{{count}}</h1>
The rendered output on the browser is 3
.在浏览器上呈现的 output 是
3
。
This is because TypeScript is compiled into javascript, and in js there is no notion of "getter" - there are objects and functions.这是因为TypeScript被编译成javascript,而在js中没有“getter”的概念——有对象有函数。
So, what you're doing is using a function in a template.因此,您正在做的是在模板中使用 function。 And since angular can't know what could change the value returned by the function, it's evaluated on every change detection cycle that affects the component.
由于 angular 不知道什么可以更改 function 返回的值,因此在影响组件的每个更改检测周期对其进行评估。 So, in your case - there were 3 change detection cycles ran before your app fully rendered.
因此,在您的情况下 - 在您的应用程序完全呈现之前运行了 3 个更改检测周期。
Caveat is - don't use functions to bind values in templates unless you're using the OnPush change detection strategy (and even then double-think if you REALLY need to use a function and are aware of possible 'gotchas').警告是——不要使用函数来绑定模板中的值,除非你使用 OnPush 更改检测策略(即使你真的需要使用 function 并且意识到可能的“陷阱”,也要仔细考虑)。
On a sidenote - using a getter with a side-effect affecting the returned value is probably a no-go in any language, but I assume it was only to illustrate your issue.在旁注中 - 使用具有影响返回值的副作用的吸气剂可能在任何语言中都是不可行的,但我认为这只是为了说明你的问题。
This is a larger question dealing with how Angular handles change detection.这是一个更大的问题,涉及 Angular 如何处理变化检测。
If you update your component as follows(specifying the OnPush ChangeDetectionStrategy), then you will see the expected value of 1.如果您按如下方式更新您的组件(指定 OnPush ChangeDetectionStrategy),那么您将看到预期值 1。
import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
i: number =0;
get count(): number{
this.i++;
return this.i;
}
}
You can read more about this enum and the related topics on Angular's docs:您可以在 Angular 的文档中阅读有关此枚举和相关主题的更多信息:
It is because of Angular's Change Detection mechanism.这是因为 Angular 的变更检测机制。
Multiple change detection cycles are performed, and for each of them the getter for the 'count' property is called.执行多个更改检测循环,并为每个循环调用“count”属性的 getter。
Since the getter for the 'count' property contains the instruction to increment the value of property 'i', the value will be incremented at each change detection cycle.由于“count”属性的 getter 包含递增属性“i”值的指令,因此该值将在每个更改检测周期递增。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.