Angular 2
Ottimizzazione del rendering con ChangeDetectionStrategy

Default vs OnPush

Considerare il seguente componente con un ingresso myInput e un valore interno chiamato someInternalValue . Entrambi sono usati nel modello di 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;

  // ...
}

Per impostazione predefinita, changeDetection: proprietà nel decoratore del componente sarà impostata su ChangeDetectionStrategy.Default ; implicito nell'esempio. In questa situazione, qualsiasi modifica a uno qualsiasi dei valori nel modello attiverà un re-rendering di MyComponent . In altre parole, se cambio myInput o someInternalValue angolo 2 eserciterà energia e re-render il componente.

Supponiamo, tuttavia, che vogliamo solo ri-renderizzare quando cambiano gli input. Considera il seguente componente con changeDetection: impostato su 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;

  // ...
}

Impostando changeDetection: su ChangeDetectionStrategy.OnPush , MyComponent verrà ri-renderizzato solo quando i suoi input cambiano. In questo caso, myInput dovrà ricevere un nuovo valore dal suo genitore per attivare un re-rendering.