Angular 2
Оптимизация рендеринга с помощью ChangeDetectionStrategy

По умолчанию 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 повторную визуализацию 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: to ChangeDetectionStrategy.OnPush , MyComponent будет повторно отображаться только при изменении его входов. В этом случае myInput должен будет получить новое значение от своего родителя, чтобы вызвать повторную визуализацию.