Question

我偶然在ngrx documentation中看到了ChangeDetectionStrategy。它使用OnPush。

Angular2中的ChangeDetectionStrategy是什么，以及何时使用OnPush Vs默认？

Answer 1

以上所有答案都解释了OnPush和Default，在这里我发布了一个关于它如何运作的例子： https://plnkr.co/edit/hBYb5VOrZYEsnzJQF5Hk?p=preview

user-one.component.ts：

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'user-one',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div>
      <h4>{{ user.name }}</h4>
      <h5>{{ user.age }} years old</h5>
      {{ user.location }} <br />
      {{ user.email }}

      <button (click)="update()">Internal update</button>
      <p>* should not update</p>
    </div>
  `
})
export class UserOneComponent {
  @Input()
  user;

  update() {
    this.user.name = 'Lebron James';
  }
}

user-two.component.ts：

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'user-two',
  changeDetection: ChangeDetectionStrategy.Default,
  template: `
    <div>
      <h4>{{ user.name }}</h4>
      <h5>{{ user.age }} years old</h5>
      {{ user.location }} <br />
      {{ user.email }}

      <button (click)="update()">Internal update</button>
      <p>* should update</p>
    </div>
  `
})
export class UserTwoComponent {
  @Input()
  user;

  update() {
    this.user.name = 'Kevin Durant';
  }
}

每当我们更改对象属性时，例如＆＃39; this.user.email＆＃39;或者＆＃39; this.user.name＆＃39;，UserTwoComponent将始终更新更改，但UserOneComponent仅在我们有新用户对象时更改。

如果更改每个组件内部的属性，它会继承ChangeDectectionStrategy，例如，如果我们在UserOneComponent中更改this.user.name，UserOneComponent和UserTwoComponent中的两个名称都会更改，但如果我们更改UserTwoComponent中的名称，则只有名称在UserTwoComponent里面会改变

Answer 2

如果您的对象是不可变的，并且您没有更改组件中对象的状态，请使用OnPush策略。它将执行更好而不是默认，其中对象的每次更改都会使运行更改检测器解决更改。 Change Detection Strategy: OnPush

中描述了或多或少相似的内容

为了通知Angular我们将遵守之前提到的条件以提高性能，我们将使用OnPush更改检测策略

Angular文档说

ChangeDetectionStrategy:



OnPush表示更改检测器的模式在水化期间将设置为CheckOnce。



Default表示更改检测器的模式在水化期间将设置为CheckAlways。

Answer 3

此示例可以帮助您理解它：

change_detection_strategy_onpush

angular2-with-immutablejs-and-redux

那么在触发事件时会发生什么？在Angular 1.x中，当触发摘要循环时，将在整个应用程序中触发每个绑定。类似地，在Angular 2中，还检查每个组件。现在告诉Angular仅在其中一个输入属性发生更改而不是每次发生事件时都会对组件运行更改检测，这不是很酷吗？我们可以在组件级别使用Angular的ChangeDetectionStrategy。

OnPush只关注输入属性，默认检查所有属性。

Answer 4

我在那个链接中看到了一个非常好的简单的解释：

http://www.codecompiled.com/change-detection-in-angular-2/

ChangeDetectionStrategy.OnPush：它只会在特定情况下更新视图：
*某些事件被解雇时 *当输入值发生变化时。

Default表示：始终更新视图。

Answer 5

变更检测是angular框架提供的一项功能，负责检查具有父子关系的指定组件之间的变更间隔。

1.更改检测可以明智地使角度应用更加有效。

2.它有两种策略onPush和Default。

3. OnPush 策略在组件中的指定对象被修改时执行，否则保持原样。这就是为什么它使效率高。

4. 默认策略可使应用程序在发现任何更改时就可以执行。

什么是Angular2中的ChangeDetectionStrategy以及何时使用OnPush Vs Default？

5 个答案:

ChangeDetectionStrategy: