Angular 2 – 订阅FormControl的valueChanges是否需要取消订阅?

以下是我所询问的一个简单示例:

class AppComponent {

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

  constructor(){

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

我有两个问题:

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

任何见解将不胜感激!

谢谢!

最佳答案
>是的,你这样做.请注意,您不需要unsubscribe from http calls,因为它们会自动完成.
>您必须取消订阅以防止内存泄漏并避免应用程序中出现意外的副作用.

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

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

RxJS方式是使用takeUntil – 它基本上允许你设置一个用户,一直在监听直到你告诉它不要:)

首先,我们需要在组件中使用destroy主题:

  private destroy$= new Subject();

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

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

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

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

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

例如,如果你有一个动态添加控件的ngFor,并且添加的每个控件都有一个valueChanges订阅(例如一个控件数组),这将特别有用.在这种情况下,您无需在ngOnDestroy中循环遍历数组并逐个取消订阅.只需使用takeUntil 🙂

我建议您阅读Ben Lesh’s article(Google的RxJS首席工程师),了解takeUntil的概况,包括优缺点.

转载注明原文:Angular 2 – 订阅FormControl的valueChanges是否需要取消订阅? - 代码日志