如何在Angular2中取消订阅

如何取消Angular2中的订阅？ RxJS似乎有一个处置方法，但我不知道如何访问它。 所以我有代码可以访问一个EventEmitter并订阅它，就像这样：

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

我如何使用mySubscription取消订阅？

Answer 1

你想取消订阅吗？

 mySubscription.unsubscribe(); 

Answer 2

我以为我也是两分钱。 我使用这种模式：

 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 /认购

优点：

它在内部pipe理新的订阅并添加一些整齐的检查。 会喜欢这个方法的function:)。

缺点：

代码stream是什么以及订阅如何受到影响并不是100％。 也不清楚（只是从代码中看）如何处理封闭订阅，以及如果所有订阅都在调用取消订阅时closures。

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

Answer 3

编辑：这不适用于RxJS 5，这是angular2正在使用。

我原以为你正在寻找一次性的处置方法。

订阅方法返回一个Disposable（ 链接 ）

我似乎无法在文档中更明确地find它，但是这起作用（ jsbin ）：

 var observable = Rx.Observable.interval(100); var subscription = observable.subscribe(function(value) { console.log(value); }); setTimeout(function() { subscription.dispose(); }, 1000) 

奇怪的是，取消订阅似乎是为你工作，而它不适合我…

Answer 4

对于取消订阅ng2的许多不同的解释，花了很多时间find正确的答案。 下面是一个工作的例子（我试图节制mousemove）。

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

Answer 5

 ngOnDestroy(){ mySubscription.unsubscribe(); } 

优先取消订阅rxjs取消订阅的同时销毁组件，即从DOM中删除，以避免不必要的内存泄漏

Answer 6

使用

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

Answer 7

我个人更喜欢使用Subject来closures组件在销毁生命周期中可能具有的所有订阅，这可以通过以下方式实现：

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