Angular 2
ChangeDetectionStrategyを使用したレンダリングの最適化

デフォルトと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:プロパティは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は親から新しい値を受け取り、再レンダリングを開始する必要があります。