Angular 2 - 订阅FormControl的valueChanges是否需要取消订阅？

Question

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

class AppComponent {

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

  constructor(){

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

我有两个问题:

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

任何见解将不胜感激!

谢谢!

Answer 1

1. 是的你是.请注意,您不需要取消订阅http调用,因为它们会自动完成.

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

例如,当组件被销毁时,如果您不取消订阅,则订阅将保留.下次用户导航回该页面并再次加载组件时,它将创建另一个订阅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的文章(谷歌的RxJS首席工程师),了解takeUntil的一个很好的概述,包括优点/缺点.

Answer 2

我强烈推荐 rxjs 扩展https://github.com/ngneat/until-destroy。它将帮助您编写更少的代码。

@UntilDestroy()
@Component({})
export class InboxComponent {
  ngOnInit() {
    this.someInput.valueChanges
      .pipe(untilDestroyed(this))
      .subscribe();
  }
}