默认 vs OnPush

考虑以下组件，其中一个输入 myInput 和一个名为 someInternalValue 的内部值。它们都用在组件的模板中。

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

@Component({
  template:`
  <div>
    <p>{{myInput}}</p>
    <p>{{someInternalValue}}</p>
  </div>
  `
})
class MyComponent {
  @Input() myInput: any;

  someInternalValue: any;

  // ...
}

默认情况下，组件装饰器中的 changeDetection:属性将设置为 ChangeDetectionStrategy.Default; 隐含在示例中。在这种情况下，对模板中任何值的任何更改都将触发 MyComponent 的重新渲染。换句话说，如果我改变 myInput 或 someInternalValue 角度 2 将发挥能量并重新渲染组件。

但是，假设我们只想在输入改变时重新渲染。考虑以下组件，将 changeDetection:设置为 ChangeDetectionStrategy.OnPush

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

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush
  template:`
  <div>
    <p>{{myInput}}</p>
    <p>{{someInternalValue}}</p>
  </div>
  `
})
class MyComponent {
  @Input() myInput: any;

  someInternalValue: any;

  // ...
}

通过将 changeDetection:设置为 ChangeDetectionStrategy.OnPush，MyComponent 将仅在其输入发生变化时重新渲染。在这种情况下，myInput 将需要从其父级接收新值以触发重新渲染。