【问题标题】:Angular 4, trying to understand change detectionAngular 4,试图理解变更检测
【发布时间】:2017-08-09 14:50:43
【问题描述】:

我正在尝试了解更改检测和 ChangeDetectionStrategy.OnPush 的实际工作原理,这是一个我无法理解的奇怪示例:

plnkr

我使用以下模板创建了一个父组件:

<app-matrix-reader *ngFor="let m of fooService.getMatrices()" [matrix]="m"></app-matrix-reader>

子组件 app-matrix-reader 有一个输入文本。

<input type="text" [(ngModel)]="matrix.a" /><br/>

如果我只是多次单击输入(即使不更改其值),则会调用函数 getMatrices。

为什么调用函数 getMatrices()?我还放置了 changeDetectionStrategy.OnPush ,因此只有在更新了组件的输入时才应检查和更新组件...

谢谢

【问题讨论】:

  • Angular 只是检查输入和输出输入后是否发生了变化,并检查它是否需要将原始值与当前值进行比较

标签: angular angular2-changedetection


【解决方案1】:

看看这个答案

Angular 会运行变化检测循环当Ж

...

2) 从组件触发绑定事件(如(click) 或某些主机侦听器)(即您的情况)

如果我只是多次点击输入(即使没有 更改其值)调用函数 getMatrices。

您正在触发 blur event on input,因此 Angular 会将树标记到您的组件以进行检查并执行更改检测

【讨论】:

  • 有办法避免吗?
  • 我不明白为什么即使使用 ChangeDetectionStrategy.OnPush 也会发生这种情况,它应该设置 ChecksEnabled = false,对吧?
  • @user2010955 Angular 在处理事件时重置 ChecksEnable github.com/angular/angular/blob/master/packages/core/src/view/…
  • 我明白了,pfff,我的应用程序在复杂的多级树中创建了许多子组件,并且随着时间的推移变得缓慢,我必须了解更改检测的真正工作原理并跳过一些无用的默认更改检测周期
猜你喜欢
  • 2018-07-14
  • 2017-11-24
  • 2017-09-28
  • 2018-05-14
  • 2019-07-09
  • 2020-03-22
  • 2011-08-28
  • 2015-11-24
  • 2017-05-25
相关资源
最近更新 更多