預設 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 將需要從其父級接收新值以觸發重新渲染。