Angular 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"));
  }
}

我有两个问题:

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?

任何见解将不胜感激！

谢谢！

推荐答案

UPDATE OCT 2020

这个问题获得了大量的 SEO 流量，虽然我的回答在技术上仍然是正确的，但我强烈建议您阅读此内容.

This question gets a lot of SEO traffic and whilst my answer is still technically correct, I strongly advise you to read this.

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.

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