Question

鉴于以下Angular组件，其字段property在每个渲染中被读取两次：

@Component({
  selector: 'why-twice',
  template: `<button (click)="handler()">re-render</button> {{property}}`
})
export class WhyTwice {
  get property() {
    console.log('get property') // This will be printed 2x
    return 0
  }
  handler() {}
}

Run this on StackBlitz

为什么是这种情况？仅读一次是不够的吗？

我正在使用Angular 7

Answer 1

angular在开发节点中运行时。它在每个变更检测周期运行两次，这是因为可以避免出现其他错误。如果你写这样的话

44824952 - Object created by constructor.
44826240 - Object created by getInstance() method.
44826240 - Object created by getInstance() method.
44826240 - Object created by getInstance() method.

然后您单击更改检测周期，它将首先检查该值，然后重新提供所有更改，然后再次检查所有内容以确保没有错，但是这次属性值将有所不同，因此情况就是属性值是不同的，并且视图具有不同的呈现值，因此它通过expressionChanged错误。在生产检查中，每个周期仅运行一次，因此不会出现任何错误

Answer 2

角度有很忙碌的变化检测方法。在开发角度，默认情况下具有ChangeDetectionStrategy，它检查所有模型属性中的更改。根据您的情况，

 get property() {
    console.log('get property')
    return 0
  }

获取器在点击时获取价值，该价值按角度检测变化，同时价值也获得回报，也可以检测变化。

为何Angular会两次读取绑定的字段/属性？

2 个答案: