Cách hủy đăng ký trong Angular2

Làm cách nào để hủy đăng ký trong Angular2? RxJS dường như có một phương thức xử lý, nhưng tôi không thể tìm ra cách truy cập nó. Vì vậy, tôi có mã có quyền truy cập vào EventEmitter và đăng ký nó, như thế này:

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

Tôi có thể sử dụng cách nào mySubscriptionđể hủy đăng ký?

Bạn đang tìm cách hủy đăng ký?

mySubscription.unsubscribe();

Tôi nghĩ tôi cũng đã bỏ vào hai xu. Tôi sử dụng mẫu này:

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();
        });
    }
}

BIÊN TẬP

Tôi đã đọc tài liệu một ngày nọ và tìm thấy một mô hình được khuyến nghị hơn:

ReactiveX / RxJS / Đăng ký

Ưu điểm:

Nó quản lý các đăng ký mới trong nội bộ và thêm một số kiểm tra gọn gàng. Thích phương pháp này trong tính năng :).

Nhược điểm:

Không rõ ràng 100% quy trình mã là gì và đăng ký bị ảnh hưởng như thế nào. Cũng không rõ ràng (chỉ bằng cách nhìn vào mã) nó xử lý như thế nào với các đăng ký đã đóng và nếu tất cả các đăng ký sẽ bị đóng nếu hủy đăng ký được gọi.

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();
    }
}

CHỈNH SỬA: Điều này không áp dụng cho RxJS 5, đó là những gì angle2 đang sử dụng.

Tôi sẽ nghĩ rằng bạn đang tìm kiếm phương pháp xử lý trên Dùng một lần .

phương thức đăng ký trả về dùng một lần ( liên kết )

Tôi dường như không thể tìm thấy nó rõ ràng hơn trong tài liệu, nhưng điều này hoạt động ( jsbin ):

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

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

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

Thật kỳ lạ, việc hủy đăng ký dường như có hiệu quả với bạn trong khi nó không hiệu quả với tôi ...

Có quá nhiều lời giải thích khác nhau về việc hủy đăng ký trên Observables cho ng2, tôi đã mất nhiều thời gian để tìm ra câu trả lời đúng. Dưới đây là một ví dụ hoạt động (tôi đã cố gắng điều chỉnh tốc độ di chuyển chuột).

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();
  }
  
}

ngOnDestroy(){
   mySubscription.unsubscribe();
}

Ưu tiên hủy đăng ký rxjs hủy đăng ký trong khi hủy thành phần, tức là xóa khỏi DOM để tránh rò rỉ bộ nhớ không cần thiết

Cá nhân tôi thích sử dụng Chủ đề để đóng tất cả các đăng ký mà một thành phần có thể có ở bước hủy vòng đời có thể đạt được theo cách này:

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();
  }
}

Cách tiếp cận được khuyến nghị là sử dụng các toán tử RxJS như toán tử takeUntil . Dưới đây là đoạn mã hiển thị cách sử dụng nó: -

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();
    }
}

Bạn có thể tìm thấy lời giải chi tiết của chủ đề tại đây

Sử dụng

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

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();
     }
`}