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

发布时间：2020-12-17 07:18:02 所属栏目：安全来源：网络整理

导读：以下是我所询问的一个简单示例： class AppComponent { someInput: FormControl = new FormControl(''); private subscription: Subscription; constructor(){ this.subscription = this.someInput.valueChanges .subscribe(() = console.log("testing")); }

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!