Angular2 में सदस्यता कैसे रद्द करें

Question 1

Angular2 में सदस्यता कैसे रद्द करता है? RxJS के पास एक डिस्पोज़ करने की विधि है, लेकिन मैं यह नहीं जान सकता कि इसे कैसे एक्सेस किया जाए। तो मेरे पास कोड है जो एक EventEmitter तक पहुंचता है और इसे इस तरह से सब्सक्राइब करता है:

var mySubscription = someEventEmitter.subscribe(
    (val) => {
        console.log('Received:', val);
    },
    (err) => {
        console.log('Received error:', err);
    },
    () => {
        console.log('Completed');
    }
);

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

Question 2

क्या आप सदस्यता समाप्त करना चाहते हैं?

mySubscription.unsubscribe();

Question 3

मैंने सोचा कि मैं अपने दो सेंट में भी डाल दिया। मैं इस पैटर्न का उपयोग करता हूं:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';

@Component({
    selector: 'my-component',
    templateUrl: 'my.component.html'
})
export class MyComponent implements OnInit, OnDestroy {

    private subscriptions: Array<Subscription> = [];

    public ngOnInit(): void {
        this.subscriptions.push(this.someService.change.subscribe(() => {
            [...]
        }));

        this.subscriptions.push(this.someOtherService.select.subscribe(() => {
            [...]
        }));
    }

    public ngOnDestroy(): void {
        this.subscriptions.forEach((subscription: Subscription) => {
            subscription.unsubscribe();
        });
    }
}

संपादित करें

मैंने दूसरे दिन प्रलेखन पढ़ा और एक अधिक अनुशंसित पैटर्न पाया:

ReactiveX / RxJS / सदस्यता

पेशेवरों:

यह आंतरिक रूप से नए सदस्यता का प्रबंधन करता है और कुछ साफ चेक जोड़ता है। सुविधा में इस विधि को पसंद करेंगे :)।

विपक्ष:

यह 100% स्पष्ट नहीं है कि कोड प्रवाह क्या है और सदस्यता कैसे प्रभावित होती है। न ही यह स्पष्ट है (केवल कोड को देखने से) यह बंद सदस्यता के साथ कैसे व्यवहार करता है और यदि सदस्यता समाप्त हो जाती है तो सभी सदस्यताएं बंद हो रही हैं।

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';

@Component({
    selector: 'my-component',
    templateUrl: 'my.component.html'
})
export class MyComponent implements OnInit, OnDestroy {

    private subscription: Subscription = new Subscription();

    public ngOnInit(): void {
        this.subscription.add(this.someService.change.subscribe(() => {
            [...]
        }));

        this.subscription.add(this.someOtherService.select.subscribe(() => {
            [...]
        }));
    }

    public ngOnDestroy(): void {
        /*
         * magic kicks in here: All subscriptions which were added
         * with "subscription.add" are canceled too!
         */
        this.subscription.unsubscribe();
    }
}

Question 4

EDIT: यह RxJS 5 पर लागू नहीं होता है, जो कि angular2 का उपयोग कर रहा है।

मैंने सोचा होगा कि आप डिस्पोजेबल पर डिस्पोजल विधि की तलाश कर रहे हैं ।

सदस्यता विधि एक डिस्पोजेबल ( लिंक ) लौटाती है

मुझे यह डॉक्स में अधिक स्पष्ट रूप से नहीं मिल रहा है, लेकिन यह काम करता है ( jsbin ):

var observable = Rx.Observable.interval(100);

var subscription = observable.subscribe(function(value) {
   console.log(value);
});

setTimeout(function() {
  subscription.dispose();           
}, 1000)

अजीब बात है, सदस्यता समाप्त करना आपके लिए काम कर रहा है, जबकि यह मेरे लिए काम नहीं कर रहा है ...

Question 5

एनजी 2 के लिए वेब्सवेबल्स पर अनसब्सक्राइब के कई अलग-अलग स्पष्टीकरणों ने, मुझे सही उत्तर खोजने के लिए उम्र लिया। नीचे एक काम करने का उदाहरण है (मैं मूसमोव को कुचलना चाह रहा था)।

import {Injectable, OnDestroy} from "@angular/core";
import {Subscription} from "rxjs";

@Injectable()
export class MyClass implements OnDestroy {
  
  mouseSubscription: Subscription; //Set a variable for your subscription
  
  myFunct() {
    // I'm trying to throttle mousemove
    const eachSecond$ = Observable.timer(0, 1000);
    const mouseMove$ = Observable.fromEvent<MouseEvent>(document, 'mousemove');
    const mouseMoveEachSecond$ = mouseMove$.sample(eachSecond$);
    
    this.mouseSubscription = mouseMoveEachSecond$.subscribe(() => this.doSomethingElse());
  }

  doSomethingElse() {
    console.log("mouse moved");
  }
  
  stopNow() {
    this.mouseSubscription.unsubscribe();
  }
  
  ngOnDestroy() {
    this.mouseSubscription.unsubscribe();
  }
  
}

स्निपेट का विस्तार करें

Question 6

ngOnDestroy(){
   mySubscription.unsubscribe();
}

अनसब्सक्राइबिंग को रोकें rxjs को अनसब्सक्राइब करते हुए घटक को नष्ट कर रहे हैं अर्थात, आवश्यक मेमोरी लीक से बचने के लिए DOM से हटा दें

Question 7

मैं व्यक्तिगत रूप से सब सब्जेक्ट को बंद करने के लिए एक घटक का उपयोग करना पसंद करता हूं जो कि जीवन चक्र के नष्ट होने वाले चरण में हो सकता है जो इस तरह से प्राप्त किया जा सकता है:

import { Component} from '@angular/core';
import { Subject } from "rxjs/Rx";

@Component({
  selector:    'some-class-app',
  templateUrl: './someClass.component.html',
  providers:   []
})

export class SomeClass {  

  private ngUnsubscribe: Subject<void> = new Subject<void>(); //This subject will tell every subscriptions to stop when the component is destroyed.

  //**********
  constructor() {}

  ngOnInit() {

    this.http.post( "SomeUrl.com", {}, null ).map( response => {

      console.log( "Yay." );

    }).takeUntil( this.ngUnsubscribe ).subscribe(); //This is where you tell the subscription to stop whenever the component will be destroyed.
  }

  ngOnDestroy() {

    //This is where we close any active subscription.
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }
}

Question 8

की सिफारिश की दृष्टिकोण जैसे RxJS ऑपरेटरों का उपयोग करने के लिए है takeUntil ऑपरेटर। नीचे कोड स्निपेट दिखाया गया है कि इसका उपयोग कैसे किया जाता है: -

import { Component, OnInit, OnDestroy } from '@angular/core';
import { interval, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent implements OnInit, OnDestroy {
    private ngUnsubscribe = new Subject();

    constructor() { }

    ngOnInit() {
        var observable1 = interval(1000);
        var observable2 = interval(2000);

        observable1.pipe(takeUntil(this.ngUnsubscribe)).subscribe(x => console.log('observable1: ' + x));
        observable2.pipe(takeUntil(this.ngUnsubscribe)).subscribe(x => console.log('observable2: ' + x));
    }

    ngOnDestroy() {
        this.ngUnsubscribe.next();
        this.ngUnsubscribe.complete();
    }
}

आप विषय का विस्तृत विवरण यहां पा सकते हैं

Question 9

उपयोग

if(mySubscription){
  mySubscription.unsubscribe();
}

Question 10

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { SomeAPIService } from '../some_file/someAPIService.service.ts

@Component({
  templateUrl: './your_Page.html',
  styleUrls: ['./your_Styles.scss']
})

export class (your class) implements OnInit, OnDestroy {
   // This is a subject variable at it simplest form 
     private unsubscribe$ = new Subject<void>();

     constructor (private someAPIService : SomeAPIService) {}
   
     ngOnit(): void { 
       this.someAPIService.getTODOlist({id:1})
        .pipe(takeUntil(this.unsubscribe$))
         .subscribe((value: SomeVariable) => {
         // What ever value you need is SomeVariable
      },)
    }


     ngOnDestroy(): void {
    // clears all, page subscriptions 
      this.unsubscribe$.next();
      this.unsubscribe$.complete();
     }
`}