提问者:小点点

Angular 2-订阅FormControl的值更改是否需要取消订阅?


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

class AppComponent {

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

  constructor(){

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

我有两个问题:

1)我最终必须取消订阅吗?2)最重要的是,无论第一个答案是什么,为什么这是答案?

任何见解将不胜感激!

谢谢!


共3个答案

匿名用户

2020年10月更新

这个问题有很多SEO流量,虽然我的答案在技术上仍然是正确的,但我强烈建议你阅读这个。

>

  • 是的,您需要。请注意,您不需要取消订阅超文本传输协议调用,因为它们会自动完成。

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

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

    有一种相对简单的方法可以设置自动退订。

    RxJS的方法是使用取下直到-它基本上可以让你设置一个订阅者,它会一直监听,直到你告诉它不要:)

    首先,我们需要在我们的组件中使用一个销毁主题:

      private destroy$ = new Subject();
    

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

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

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

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

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

    例如,如果您有一个正在动态添加控件的ngFor,并且添加的每个控件都有一个value eChange订阅(例如控件数组),这将特别有用。在这种情况下,您不需要在ngOnDestroy中遍历数组并逐个取消订阅。只需使用带直到:)

    我建议阅读Ben Lesh的文章(Google的RxJS首席工程师),以获得对外卖的全面概述,包括优点/缺点。

  • 匿名用户

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

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

    匿名用户

    >

  • 是的。
  • 对于任何订阅,您都需要取消订阅以防止内存泄漏。有几种方法可以取消订阅。a."N次后自动取消订阅"-添加。采取(numberOfTimes)将在您指定的N次后取消订阅。例如:

    this.subscription = this.someInput.valueChanges
        .take(2) // unsubscribe after 2 times
        .subscribe(() => console.log("testing"));
    

    湾。在组件生命周期内手动取消订阅,通常在ngOnDestroy()期间