कोणीय में वेधशालाओं से सदस्यता समाप्त करने के 6 तरीके

एक अवलोकन योग्य सदस्यता का रिवर्स साइड

ऑब्जर्वबल्स में एक सदस्यता विधि होती है जिसे ऑब्ज़र्वेबल को भेजे गए ( एमिट ) भेजे गए मानों को प्राप्त करने के लिए कॉलबैक फ़ंक्शन के साथ बुलाया जाता है। कोणीय में, इसका उपयोग घटकों / निर्देशों में और विशेष रूप से राउटर मॉड्यूल, NgRx और HTTP में किया जाता है।

यदि हम एक स्ट्रीम की सदस्यता लेते हैं, तो यह खुली रहेगी और इसे तब भी कहा जाएगा जब भी एप्लिकेशन के किसी भी हिस्से से मूल्यों को इसमें स्थानांतरित किया जाता है, जब तक कि यह अनसब्सक्राइब करके कॉल बंद न हो जाए।

@Component({...}) export class AppComponent implements OnInit { subscription: Subscription ngOnInit () { const observable = Rx.Observable.interval(1000); this.subscription = observable.subscribe(x => console.log(x)); } } 

इस कार्यान्वयन में, हम प्रत्येक सेकंड में मान भेजने के लिए एक अंतराल का उपयोग करते हैं। हम भेजे गए मान प्राप्त करने के लिए इसकी सदस्यता लेते हैं, और हमारे कॉलबैक फ़ंक्शन ब्राउज़र कंसोल के लिए परिणाम लिखते हैं।

अब, यदि AppComponent नष्ट हो गया है, उदाहरण के लिए, घटक से बाहर निकलने या नष्ट () विधि का उपयोग करने के बाद, हम अभी भी ब्राउज़र में कंसोल लॉग देखेंगे। ऐसा इसलिए है क्योंकि यद्यपि AppComponent नष्ट हो गया था, सदस्यता रद्द नहीं की गई थी।

यदि सदस्यता बंद नहीं होती है, तो कॉलबैक फ़ंक्शन को लगातार कॉल किया जाएगा, जिससे मेमोरी मेमोरी और प्रदर्शन समस्याएं गंभीर हो जाएंगी। लीक से बचने के लिए, हर बार ऑब्जर्वेबल से "अनसब्सक्राइब" करना आवश्यक है।

1. सदस्यता समाप्त विधि का उपयोग करना

किसी भी सदस्यता के पास मुफ्त संसाधनों के लिए सदस्यता समाप्त करने और अवलोकन योग्य निष्पादन को रद्द करने का कार्य है। मेमोरी रिसाव को रोकने के लिए, आपको ऑब्जर्वेबल में अनसब्सक्राइब विधि का उपयोग करके अनसब्सक्राइब करना होगा।

कोणीय में, आपको एक घटक के नष्ट होने पर ऑब्जर्वेबल से अनसब्सक्राइब करने की आवश्यकता होती है। सौभाग्य से, कोणीय में एक एनगॉन्डेस्ट्रो हुक होता है जिसे घटक को नष्ट करने से पहले कहा जाता है, जो डेवलपर्स को यह सुनिश्चित करने की अनुमति देता है कि मेमोरी को साफ किया जाता है, ठंड सब्सक्रिप्शन, खुले बंदरगाहों और पैर में अन्य शॉट्स से बचने के लिए।

 @Component({…}) export class AppComponent implements OnInit, OnDestroy { subscription: Subscription ngOnInit () { const observable = Rx.Observable.interval(1000); this.subscription = observable.subscribe(x => console.log(x)); } ngOnDestroy() { this.subscription.unsubscribe() } } 

हमने अपने AppComponent में ngOnDestroy को जोड़ा और ऑब्जर्वेबल this.subscription पर सदस्यता समाप्त विधि को कॉल किया । जब AppComponent नष्ट हो जाता है (लिंक पर क्लिक करके, नष्ट () विधि, आदि), सदस्यता फ्रीज नहीं होगी, अंतराल बंद हो जाएगा, और ब्राउज़र में अधिक कंसोल लॉग नहीं होंगे।

लेकिन क्या होगा अगर हमारे पास कई सदस्यताएं हैं?

 @Component({…}) export class AppComponent implements OnInit, OnDestroy { subscription1$: Subscription; subscription2$: Subscription; ngOnInit () { const observable1$ = Rx.Observable.interval(1000); const observable2$ = Rx.Observable.interval(400); this.subscription1$ = observable.subscribe(x => console.log("From interval 1000" x)); this.subscription2$ = observable.subscribe(x => console.log("From interval 400" x)); } ngOnDestroy() { this.subscription1$.unsubscribe(); this.subscription2$.unsubscribe(); } } 

AppComponent में दो सदस्यताएँ हैं और दोनों ngOnDestroy हुक में अनसब्सक्राइब की गई हैं, जो मेमोरी रिसाव को रोकती हैं।

आप एक सरणी में सभी सदस्यताएँ भी एकत्र कर सकते हैं और उन्हें एक लूप में अनसब्सक्राइब कर सकते हैं:

 @Component({…}) export class AppComponent implements OnInit, OnDestroy { subscription1$: Subscription; subscription2$: Subscription; subscriptions: Subscription[] = []; ngOnInit () { const observable1$ = Rx.Observable.interval(1000); const observable2$ = Rx.Observable.interval(400); this.subscription1$ = observable.subscribe(x => console.log("From interval 1000" x)); this.subscription2$ = observable.subscribe(x => console.log("From interval 400" x)); this.subscriptions.push(this.subscription1$); this.subscriptions.push(this.subscription2$); } ngOnDestroy() { this.subscriptions.forEach((subscription) => subscription.unsubscribe()); } } 

सदस्यता विधि प्रकार सदस्यता की एक RxJS वस्तु लौटाती है। यह एक बार का संसाधन है। ऐड मेथड का इस्तेमाल करके सब्सक्रिप्शन को ग्रुप किया जा सकता है, जो चाइल्ड सब्सक्रिप्शन को करंट से जोड़ देगा। जब कोई सदस्यता रद्द होती है, तो उसके सभी बच्चे भी सदस्यता समाप्त कर दिए जाते हैं। आइए हमारे AppComponent को फिर से लिखने का प्रयास करें:

 @Component({…}) export class AppComponent implements OnInit, OnDestroy { subscription: Subscription; ngOnInit () { const observable1$ = Rx.Observable.interval(1000); const observable2$ = Rx.Observable.interval(400); const subscription1$ = observable.subscribe(x => console.log("From interval 1000" x)); const subscription2$ = observable.subscribe(x => console.log("From interval 400" x)); this.subscription.add(subscription1$); this.subscription.add(subscription2$); } ngOnDestroy() { this.subscription.unsubscribe() } } 

इसलिए हम घटक के विनाश के समय इस $ .subscripton1 $ और this.subscripton2 $ लिखेंगे ।

2. Async का उपयोग करना | पाइप

पाइप async अवलोकन या वादा करने के लिए सदस्यता लेता है और पारित अंतिम मान लौटाता है। जब कोई नया मान सबमिट किया जाता है, तो पाइप एसिंक्स परिवर्तन ट्रैकिंग के लिए घटक की जांच करता है। यदि घटक नष्ट हो जाता है, तो पाइप एसिंक्स स्वचालित रूप से सदस्यता समाप्त हो जाती है।

 @Component({ ..., template: ` <div> Interval: {{observable$ | async}} </div> ` }) export class AppComponent implements OnInit { observable$; ngOnInit () { this.observable$ = Rx.Observable.interval(1000); } } 

प्रारंभ होने पर, AppComponent अंतराल विधि से एक ऑब्जर्वेबल बनाएगा। अवलोकनीय $ पैटर्न में, Async पास है। यह अवलोकनीय $ की सदस्यता लेता है और डोम में इसका मूल्य प्रदर्शित करता है। जब AppComponent नष्ट हो जाता है तो वह भी सदस्यता समाप्त कर देगा। इसकी कक्षा में पाइप एस्सेंक में ngOnDestroy हुक होता है, इसलिए इसे तब कहा जाएगा जब इसका दृश्य नष्ट हो जाएगा।
पाइप एसिंक्स उपयोग करने के लिए बहुत सुविधाजनक है, क्योंकि वह स्वयं सदस्यता समाप्त करेगा और उनसे सदस्यता समाप्त करेगा। और अब हम चिंता नहीं कर सकते अगर हम ngOnDestroy में सदस्यता समाप्त करना भूल जाते हैं।

3. RxJS का उपयोग करके * स्टेटमेंट लें

RxJS में ऐसे उपयोगी ऑपरेटर होते हैं जिनका उपयोग आप हमारे कोणीय प्रोजेक्ट में सदस्यता समाप्त करने के लिए एक घोषणात्मक तरीके से कर सकते हैं। उनमें से एक ऑपरेटर है * ले ** परिवार:

• लेना (n)
• टेक यूटिल (नोटिफ़ायर)
• takeWile (विधेय)

लेना (n)
यह ऑपरेटर कई बार और समाप्त होने वाली मूल सदस्यता का उत्सर्जन करता है। सबसे अधिक बार, एक (1) सदस्यता और निकास के लिए ले जाया जाता है।

यह ऑपरेटर उपयोगी है अगर हम चाहते हैं कि ऑब्जर्वेबल एक बार एक मान पारित करें, और फिर स्ट्रीम से सदस्यता समाप्त करें:

 @Component({...}) export class AppComponent implements OnInit { subscription$; ngOnInit () { const observable$ = Rx.Observable.interval(1000); this.subscription$ = observable$.pipe(take(1)). subscribe(x => console.log(x)); } } 

जब अंतराल पहला मान पास करता है तो सदस्यता $ सदस्यता समाप्त हो जाएगी।

कृपया ध्यान दें : यहां तक ​​कि अगर AppComponent नष्ट हो जाता है, तो सदस्यता $ सदस्यता को रद्द नहीं करेगी जब तक कि अंतराल मूल्य पारित नहीं करता। इसलिए, यह सुनिश्चित करना बेहतर है कि ngOnDestroy हुक में सब कुछ अनसब्सक्राइब किया गया है:

 @Component({…}) export class AppComponent implements OnInit, OnDestroy { subscription$; ngOnInit () { var observable$ = Rx.Observable.interval(1000); this.subscription$ = observable$.pipe(take(1)).subscribe(x => console.log(x)); } ngOnDestroy() { this.subscription$.unsubscribe(); } } 

टेक यूटिल (नोटिफ़ायर)
यह कथन मूल ऑब्जर्वेबल से मूल्यों का उत्सर्जन करता है जब तक कि नोटिफ़ायर एक पूर्ण संदेश भेजता है।

 @Component({…}) export class AppComponent implements OnInit, OnDestroy { notifier = new Subject(); ngOnInit () { const observable$ = Rx.Observable.interval(1000); observable$.pipe(takeUntil(this.notifier)).subscribe(x => console.log(x)); } ngOnDestroy() { this.notifier.next(); this.notifier.complete(); } } 

हमारे पास सूचनाओं के लिए एक अतिरिक्त विषय है, जो इस सदस्यता रद्द करने के लिए एक कमांड भेजेगा । जब तक हम हस्ताक्षरित नहीं होते हैं, तब तक हम टेक यूटिल में अवलोकन योग्य होते हैं। टेकअंटिल इंटरवल संदेशों का उत्सर्जन करेगा जब तक कि नोटिफ़ायर पर्यवेक्षित $ को अनसब्सक्राइब नहीं करता। यह नोटऑनस्ट्रो हुक में नोटिफ़ायर डालने के लिए सबसे अच्छा है।

takeWile (विधेय)
जब तक वे विधेय की स्थिति से मेल खाते हैं, तब तक यह कथन अवलोकन योग्य मूल्यों का उत्सर्जन करेगा।

 @Component({...}) export class AppComponent implements OnInit { ngOnInit () { const observable$ = Rx.Observable.interval(1000); observable$.pipe(takeWhile(value => value < 10)).subscribe(x => console.log(x)); } } 

हम टेकहाइव ऑपरेटर के साथ अवलोकन योग्य $ को पाइप करते हैं, जो मानों को तब तक भेजेंगे जब तक कि वे 10. से कम न हों। यदि 10 से अधिक या उससे अधिक का मान आता है, तो ऑपरेटर सदस्यता समाप्त कर देगा।
यह समझना महत्वपूर्ण है कि अवलोकन योग्य $ सदस्यता तब तक खुली रहेगी जब तक अंतराल 10. नहीं देता है । इसलिए, सुरक्षा के लिए, हम घटक को नष्ट होने पर अस्पष्ट $ से सदस्यता समाप्त करने के लिए ngOnDestroy हुक जोड़ते हैं।

 @Component({…}) export class AppComponent implements OnInit, OnDestroy { subscription$; ngOnInit () { var observable$ = Rx.Observable.interval(1000); this.subscription$ = observable$.pipe(takeWhile(value => value < 10)).subscribe(x => console.log(x)); } ngOnDestroy() { this.subscription$.unsubscribe(); } } 

4. RxJS पहले ऑपरेटर का उपयोग करना

यह कथन संयुक्त ले (1) और टेकवाइल के समान है।

यदि इसे एक पैरामीटर के बिना कहा जाता है, तो उत्सर्जन-यह पहला मान अवलोकनीय है और समाप्त होता है। यदि इसे एक विधेय फ़ंक्शन के साथ कहा जाता है, तो यह उत्सर्जित करता है - यह मूल अवलोकन का पहला मूल्य है, जो विधेय फ़ंक्शन की स्थिति से मेल खाता है, और समाप्त होता है।

 @Component({...}) export class AppComponent implements OnInit { observable$; ngOnInit () { this.observable = Rx.Observable.interval(1000); this.observable$.pipe(first()).subscribe(x => console.log(x)); } } 

यदि अंतराल अपना पहला मूल्य पास करता है, तो अवलोकन योग्य $ समाप्त हो जाएगा। इसका अर्थ है कि कंसोल में हम केवल 1 लॉग संदेश देखेंगे।

 @Component({...}) export class AppComponent implements OnInit { observable$; ngOnInit () { this.observable$ = Rx.Observable.interval(1000); this.observable$.pipe(first(val => val === 10)).subscribe(x => console.log(x)); } } 

यहां पहले मानों को तब तक नहीं छोड़ा जाएगा जब तक कि अंतराल 10 से पार नहीं हो जाता है, और फिर पर्यवेक्षित $ पूरा हो जाता है । कंसोल में हम केवल एक संदेश देखेंगे।

पहले उदाहरण में, यदि AppComponent को पहले अवलोकन $ से मूल्य प्राप्त होने से पहले नष्ट कर दिया जाता है, तो सदस्यता तब भी खुली रहेगी जब तक कि पहला संदेश प्राप्त नहीं हो जाता।
इसके अलावा, दूसरे उदाहरण में, यदि AppComponent को अंतराल से पहले नष्ट कर दिया जाता है, तो ऑपरेटर की स्थिति से मेल खाता मूल्य वापस आ जाता है, फिर भी सदस्यता अंतराल के 10 तक खुली रहेगी। इसलिए, सुरक्षा सुनिश्चित करने के लिए, हमें स्पष्ट रूप से सदस्यता रद्द करनी होगी। हुक ngOnDestroy ।

5. अनसब्सक्राइब करने के लिए डेकोरेटर का उपयोग करना

हम सभी इंसान हैं, हम भूल जाते हैं। पिछले तरीकों में से अधिकांश ngOnDestroy हुक पर भरोसा करते हैं ताकि यह सुनिश्चित हो सके कि घटक को नष्ट करने से पहले सदस्यता को मंजूरी दे दी गई है । लेकिन हम उन्हें ngOnDestroy में पंजीकृत करना भूल सकते हैं - शायद समय सीमा के कारण, या नर्व क्लाइंट जो जानता है कि आप कहां रहते हैं ...

इस मामले में, हम घटक में सभी सदस्यता से स्वचालित रूप से सदस्यता समाप्त करने के लिए अपनी कोणीय परियोजनाओं में सज्जाकार का उपयोग कर सकते हैं।

इस तरह के एक उपयोगी कार्यान्वयन का एक उदाहरण है:

 function AutoUnsub() { return function(constructor) { const orig = constructor.prototype.ngOnDestroy; constructor.prototype.ngOnDestroy = function() { for(let prop in this) { const property = this[prop]; if(typeof property.subscribe === "function") { property.unsubscribe(); } } orig.apply(); } } } 

यह AutoUnsub एक डेकोरेटर है जिसे हमारी कोणीय परियोजना में कक्षाओं में लागू किया जा सकता है। जैसा कि आप देख सकते हैं, यह मूल ngOnDestroy हुक बचाता है, फिर एक नया बनाता है और इसे उस वर्ग से जोड़ता है जिस पर इसे लागू किया जाता है। इस तरह, जब कक्षा नष्ट हो जाती है, तो एक नया हुक कहा जाता है। इसका कार्य वर्ग के गुणों के माध्यम से दिखता है, और यदि यह एक ऑब्जर्वेबल पाता है, तो इससे अप्रकाशित हो जाता है। तब यह मूल ngOnDestroy हुक को कक्षा में बुलाता है , यदि कोई हो।

 @Component({...}) @AutoUnsub export class AppComponent implements OnInit { observable$; ngOnInit () { this.observable$ = Rx.Observable.interval(1000); this.observable$.subscribe(x => console.log(x)) } } 

हम इसे अपने AppComponent पर लागू करते हैं और अब ngOnDestroy में अवलोकन योग्य $ से सदस्यता समाप्त करने के बारे में चिंता करने के बारे में चिंता नहीं करते हैं - डेकोरेटर हमारे लिए यह करेगा।

लेकिन इस पद्धति का एक नकारात्मक पहलू यह भी है - यदि हमारे घटक में बिना सबस्क्रिप्शन के कोई ऑब्जर्वेबल है तो त्रुटियां होंगी।

6. tslint का उपयोग करना

कभी-कभी tslint का एक संदेश कंसोल को यह बताने के लिए उपयोगी हो सकता है कि हमारे घटकों या निर्देशों ने ngOnDestroy विधि घोषित नहीं की है। आप कंसोल को चेतावनी देने के लिए tslint में एक कस्टम नियम जोड़ सकते हैं जब एक प्रकार का वृक्ष या निर्माण चल रहा है कि हमारे घटकों में ngOnDestroy हुक नहीं है:

 // ngOnDestroyRule.tsimport * as Lint from "tslint" import * as ts from "typescript"; import * as tsutils from "tsutils"; export class Rule extends Lint.Rules.AbstractRule { public static metadata: Lint.IRuleMetadata = { ruleName: "ng-on-destroy", description: "Enforces ngOnDestory hook on component/directive/pipe classes", optionsDescription: "Not configurable.", options: null, type: "style", typescriptOnly: false } public static FAILURE_STRING = "Class name must have the ngOnDestroy hook"; public apply(sourceFile: ts.SourceFile): Lint.RuleFailure[] { return this.applyWithWalker(new NgOnDestroyWalker(sourceFile, Rule.metadata.ruleName, void this.getOptions())) } } class NgOnDestroyWalker extends Lint.AbstractWalker { visitClassDeclaration(node: ts.ClassDeclaration) { this.validateMethods(node); } validateMethods(node: ts.ClassDeclaration) { const methodNames = node.members.filter(ts.isMethodDeclaration).map(m => m.name!.getText()); const ngOnDestroyArr = methodNames.filter( methodName => methodName === "ngOnDestroy"); if( ngOnDestroyArr.length === 0) this.addFailureAtNode(node.name, Rule.FAILURE_STRING); } } 

अगर हमारे पास ngOnDestroy बिना ऐसा कोई घटक है:

 @Component({...}) export class AppComponent implements OnInit { observable$; ngOnInit () { this.observable$ = Rx.Observable.interval(1000); this.observable$.subscribe(x => console.log(x)); } } 

लिंट-आईएनजी AppComponent हमें लापता ngOnDestroy हुक के बारे में चेतावनी देगा:

 $ ng lint Error at app.component.ts 12: Class name must have the ngOnDestroy hook 

निष्कर्ष

झूलने या खुली सदस्यता से मेमोरी लीक, त्रुटियां, अवांछित व्यवहार या खराब एप्लिकेशन प्रदर्शन हो सकता है। इससे बचने के लिए, हमने कोणीय परियोजनाओं में वेधशाला से सदस्यता समाप्त करने के विभिन्न तरीकों को देखा। और जो एक विशिष्ट स्थिति में उपयोग करने के लिए आप पर निर्भर है।