Angular 2
Optimización de la representación mediante ChangeDetectionStrategy

Predeterminado vs OnPush

Considere el siguiente componente con una entrada myInput y un valor interno llamado someInternalValue . Ambos se utilizan en la plantilla de un componente.

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

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

  someInternalValue: any;

  // ...
}

De forma predeterminada, la propiedad changeDetection: en el decorador de componentes se establecerá en ChangeDetectionStrategy.Default ; implícito en el ejemplo. En esta situación, cualquier cambio en cualquiera de los valores de la plantilla activará una nueva representación de MyComponent . En otras palabras, si cambio myInput o someInternalValue angular 2 ejercerá energía y volverá a generar el componente.

Sin embargo, supongamos que solo queremos volver a renderizar cuando cambian las entradas. Considere el siguiente componente con changeDetection: configurado en 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;

  // ...
}

Al establecer changeDetection: to ChangeDetectionStrategy.OnPush , MyComponent solo se volverá a representar cuando cambien sus entradas. En este caso, myInput deberá recibir un nuevo valor de su padre para desencadenar una nueva representación.