परिवर्तन का पता लगाना एंगुलर का एक मूलभूत पहलू है, जो DOM के उन हिस्सों की पहचान करने और अद्यतन करने के लिए जिम्मेदार है जो डेटा संशोधनों या उपयोगकर्ता इंटरैक्शन के जवाब में बदल गए हैं। यह प्रक्रिया सुनिश्चित करती है कि यूआई अंतर्निहित डेटा के अनुरूप बना रहे, उपयोगकर्ता अनुभव और एप्लिकेशन प्रदर्शन को बढ़ाए।

Zone.js की भूमिका

ऐतिहासिक रूप से, एंगुलर ने अपने परिवर्तन का पता लगाने के तंत्र के लिए Zone.js पर भरोसा किया है। Zone.js एक जावास्क्रिप्ट लाइब्रेरी है जो एसिंक्रोनस ऑपरेशंस को इंटरसेप्ट करती है, जिससे एंगुलर को परिवर्तनों की निगरानी करने और तदनुसार अपडेट ट्रिगर करने की अनुमति मिलती है। हालाँकि, Zone.js को शामिल करने से एप्लिकेशन में ओवरहेड जुड़ सकता है, विशेष रूप से लगातार अतुल्यकालिक गतिविधियों वाले परिदृश्यों में।

पता लगाने की रणनीतियाँ बदलें

एंगुलर दो प्राथमिक परिवर्तन पहचान रणनीतियाँ प्रदान करता है:

• डिफ़ॉल्ट: प्रत्येक जीवनचक्र हुक के बाद परिवर्तन का पता लगाना शुरू हो जाता है, जैसे ngOnInit या ngAfterViewInit। यह रणनीति सीधी है लेकिन इससे अनावश्यक DOM अपडेट हो सकते हैं, खासकर बड़े अनुप्रयोगों में।

@Component({
  selector: 'app-my-component',
  template: `
    
{{ message }}
  `
})
export class MyComponent {
  message = 'Hello, world!';
}

इस रणनीति को लागू करना आसान है, क्योंकि एंगुलर अधिकांश परिवर्तन पहचान तर्क को स्वचालित रूप से संभालता है।
इस परिवर्तन का पता लगाने की रणनीति के साथ सबसे बड़ी चुनौती यह थी कि इससे अनावश्यक DOM अपडेट होते थे जो बड़े अनुप्रयोगों के लिए महत्वपूर्ण हो जाते हैं।

• ऑनपुश: परिवर्तन का पता लगाना केवल तभी ट्रिगर होता है जब इनपुट गुण या एसिंक्रोनस ऑब्जर्वेबल्स बदलते हैं। यह रणनीति लगातार डेटा अपडेट वाले जटिल घटकों के लिए अधिक प्रभावी है लेकिन इसके लिए अधिक मैन्युअल प्रबंधन की आवश्यकता होती है।

@Component({
  selector: 'app-my-component',
  template: `
    
{{ message }}
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  message = 'Hello, world!';
} 

जबकि ऑनपुश परिवर्तन का पता लगाने की रणनीति ने अनावश्यक DOM हेरफेर को कम कर दिया, ऑनपुश परिवर्तन रणनीति के साथ सबसे बड़ी चुनौती यह थी कि डेवलपर्स को अधिक मैन्युअल प्रबंधन करना पड़ा और परिवर्तनों को मैन्युअल रूप से ट्रिगर करना पड़ा। उन्हें कुछ परिदृश्यों में, जैसे कि जब डेटा अप्रत्यक्ष रूप से बदलता है या परिवर्तनशील वस्तुओं का उपयोग करते समय, परिवर्तन का पता लगाने को स्पष्ट रूप से चेंजडिटेक्टररेफ.डिटेक्टचेंज () के साथ संभालना पड़ता है।

कोणीय 18 और हाइब्रिड परिवर्तन का पता लगाना: एक ज़ोन-रहित दृष्टिकोण

Zone.js से जुड़ी चुनौतियों का समाधान करने के लिए, Angular 18 ने एक प्रायोगिक सुविधा पेश की जिसे हाइब्रिड चेंज डिटेक्शन के रूप में जाना जाता है। इस दृष्टिकोण का उद्देश्य परिवर्तनों का पता लगाने और DOM में हेरफेर करने के लिए एक नए परिवर्तन पहचान तंत्र का उपयोग करके Zone.js को पूरी तरह से समाप्त करना है।

हाइब्रिड परिवर्तन का पता लगाना सक्षम करना:

हाइब्रिड चेंज डिटेक्शन को सक्षम करने के लिए, आप निम्नलिखित कोड का उपयोग कर सकते हैं:

bootstrapApplication(RootCmp,
{ providers: [provideExperimentalZonelessChangeDetection()] 
}
);

यह निम्नलिखित परिदृश्यों में परिवर्तन का पता लगाने को ट्रिगर करेगा:

• एक सिग्नल अपडेट किया गया है।
• changeडिटेक्टरRef.markForCheck() कहा जाता है।
• AsyncPipe के साथ सब्सक्राइब किए गए एक अवलोकन योग्य को एक नया मान प्राप्त होता है।
• एक घटक जुड़ जाता है या अलग हो जाता है।
• एक इनपुट सेट है।

एक बार हाइब्रिड चेंज डिटेक्शन सक्षम हो जाने पर, आप अपने एप्लिकेशन के पॉलीफ़िल से Zone.js को सुरक्षित रूप से हटा सकते हैं।

 "polyfills": [
              "zone.js" //remove this line
            ],

हाइब्रिड परिवर्तन का पता लगाने के लाभ

• बेहतर प्रदर्शन: Zone.js को हटाने से ओवरहेड कम हो जाता है, जिससे बेहतर प्रदर्शन होता है, खासकर कई अतुल्यकालिक संचालन वाले अनुप्रयोगों में।

• उन्नत डेवलपर अनुभव: मैन्युअल परिवर्तन का पता लगाने से विकास सरल हो जाता है और त्रुटियों की संभावना कम हो जाती है।

• छोटा एप्लिकेशन आकार: Zone.js आमतौर पर एप्लिकेशन आकार में लगभग 13KB जोड़ता है। इसे हटाने से बंडल छोटा हो सकता है।