角度2-订阅FormControl的valueChanges是否需要取消订阅? [英] Angular 2 - Does subscribing to FormControl's valueChanges need an unsubscribe?

问题描述

下面是我要问的一个简单示例:

Below is a simple example of what I am asking about:

class AppComponent {

  someInput: FormControl = new FormControl('');
  private subscription: Subscription;

  constructor(){

    this.subscription = this.someInput.valueChanges
        .subscribe(() => console.log("testing"));
  }
}

我有2个问题:

1)我最终必须取消订阅吗? 2)最重要的是，无论答案是#1，为什么是答案?

1) Do I have to eventually unsubscribe from this? 2) Most importantly, whatever the answer is to #1, WHY is that the answer?

任何见识将不胜感激！

谢谢！

推荐答案

1. 是的，您知道.请注意，您不需要退订http呼叫，因为它们会自动完成.

1. Yes, you do. Note that you do not need to unsubscribe from http calls because they auto-complete themselves.

您必须取消订阅，以防止内存泄漏并避免应用程序中意外的副作用.

You must unsubscribe to prevent memory leaks and to avoid unexpected side-effects in your application.

例如，当组件被销毁时，如果您不取消订阅，则该订阅将保留.下次用户再次导航到该页面并再次加载该组件时，它将创建另一个对valueChanges的订阅-现在您有2个活动的订阅同时处理数据，这将导致应用程序发生意外行为.

For example, when a component is destroyed, the subscription will remain if you don't unsubscribe from it. The next time the user navigates back to that page and the component gets loaded again, it will create another subscription to valueChanges - now you have 2 active subscriptions processing data simultaneously and that will lead to unexpected behavior in your app.

有一种相对简单的方法来设置自动取消订阅.

There is a relatively easy way to setup auto-unsubscribing.

RxJS方法是使用 takeUntil -它基本上可以让您设置一个订阅者，该订阅者会一直听直到您告诉它不听:)

The RxJS way is to use takeUntil - it basically lets you set up a subscriber which keeps listening UNTIL you tell it not to :)

首先，我们需要在组件中使用销毁主体:

First we need a destroy subject in our component:

  private destroy$ = new Subject();

然后告诉它在我们的组件被销毁时发出一个值:

Then tell it to emit a value when our component is destroyed:

  ngOnDestroy(){
    this.destroy$.next();
    this.destroy$.complete(); 
  }

现在设置您的订阅者以使用它:

Now setup your subscribes to use it:

this.someInput.valueChanges
  .debounceTime(1000)
  .distinctUntilChanged()
  .takeUntil(this.destroy$)
  .subscribe (newValue => {

所有这样的订阅设置都会在收到销毁通知后自动取消订阅.

All the subscribes setup like this will then auto-unsubscribe when they receive the destroy notification.

例如，如果您有一个ngFor动态添加控件，并且添加的每个控件都有valueChanges订阅(例如，控件数组)，则此功能特别有用.在这种情况下，您无需遍历ngOnDestroy中的数组并一一退订.只需使用takeUntil:)

This is especially useful if, for example, you have an ngFor that is dynamically adding controls, and each control added has an valueChanges subscription (eg. an array of controls). In such a scenario you don't need to loop through the array in ngOnDestroy and unsubscribe one-by-one. Just use takeUntil :)

我建议阅读 Ben Lesh的文章(Google的RxJS首席工程师)，以全面了解takeUntil，包括优点/缺点.

I recommend reading Ben Lesh's article (RxJS lead engineer at Google) for a great overview of takeUntil, including pros/cons.

这篇关于角度2-订阅FormControl的valueChanges是否需要取消订阅?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！