Angular 2
Optimera rendering med ChangeDetectionStrategy

Standard vs OnPush

Tänk på följande komponent med en inmatad myInput och ett internt värde som heter someInternalValue . Båda används i en komponents mall.

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

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

  someInternalValue: any;

  // ...
}

Som standard changeDetection: egenskapen changeDetection: i komponentdekoratören att ställas in till ChangeDetectionStrategy.Default ; implicit i exemplet. I den här situationen kommer eventuella ändringar av någon av värdena i mallen att utlösa en återgivning av MyComponent . Med andra ord, om jag ändrar myInput eller someInternalValue vinkel 2 att utöva energi och återge komponenten.

Anta dock att vi bara vill återge när ingångarna ändras. Tänk på följande komponent med changeDetection: ställ in på 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;

  // ...
}

Genom att ställa changeDetection: till ChangeDetectionStrategy.OnPush kommer MyComponent endast att återges när dess ingångar ändras. I det här fallet kommer myInput att behöva få ett nytt värde från sin överordnade för att utlösa en återgivning.