Angular में ngOnDestroy हुक
ngOnDestroy हुक कंपोनेंट के
हटाए जाने पर ट्रिगर होता है। इस हुक में, आप
संसाधनों को मुक्त कर सकते हैं, तत्वों की घटनाओं की सदस्यता समाप्त कर सकते हैं,
टाइमर हटा सकते हैं, आदि।
Angular में कंपोनेंट का निर्माण और उन्हें हटाना
तब होता है, जब वह if शर्त के साथ
प्रतिक्रियाशील रूप से दिखाया और छिपाया जाता है।
यानी Angular केवल कंपोनेंट्स को छिपाता नहीं है,
बल्कि उन्हें हटा देता है और वापस लौटा देता है।
कंपोनेंट्स का निर्माण और उन्हें हटाना तब भी होता है, जब उन्हें लूप में प्रतिक्रियाशील रूप से पुनरावृत्त किया जाता है। इस स्थिति में, Angular कंपोनेंट्स को बनाता और हटाता भी है।
आइए व्यवहार में आज़माते हैं। OnDestroy
इंटरफेस को इम्पोर्ट करें:
import { OnDestroy } from '@angular/core';
इसे क्लास से कनेक्ट करें:
export class UserComponent implements OnDestroy {
}
और अब हमारा हुक लिखें:
export class UserComponent implements OnDestroy {
constructor() {
console.log('constructor is started');
}
ngOnDestroy() {
console.log('onDestroy is applied');
}
}
एक प्रतिक्रियाशील if बनाएं, जिसके द्वारा
एक चाइल्ड कंपोनेंट दिखाया जाएगा। सीखे गए हुक के
कार्य की जांच करें।
पैरेंट कंपोनेंट में उपयोगकर्ताओं के नामों की एक सरणी दी गई है। उपयोगकर्ता के साथ एक चाइल्ड कंपोनेंट बनाएं। सरणी को लूप से पुनरावृत्त करें और उपयोगकर्ताओं वाले कंपोनेंट्स आउटपुट करें। एक बटन बनाएं, जिसके दबाने पर सरणी से तत्व हटाए जाएंगे। जांचें, कि चाइल्ड कंपोनेंट्स में हटाने का हुक ट्रिगर होगा।
