Angular 2
ChangeDetectionStrategy का उपयोग करके प्रतिपादन का अनुकूलन

डिफ़ॉल्ट बनाम ऑनपश

निम्नलिखित इनपुट पर एक इनपुट 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 सेट किया ChangeDetectionStrategy.Default ; उदाहरण में निहित। इस स्थिति में, टेम्पलेट के किसी भी मान में कोई भी परिवर्तन MyComponent पुन: रेंडर को ट्रिगर करेगा। दूसरे शब्दों में, अगर मैं myInput या someInternalValue कोणीय 2 बदलता हूं, तो ऊर्जा को someInternalValue और घटक को फिर से प्रस्तुत करेगा।

हालांकि, मान लीजिए कि इनपुट्स बदलने पर हम केवल फिर से रेंडर करना चाहते हैं। साथ निम्नलिखित घटक पर विचार करें 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 को फिर से रेंडर करने के लिए अपने माता-पिता से एक नया मूल्य प्राप्त करना होगा।