submitForm 上的 Angular 2 RxJS 可观察取消订阅

Posted 2023-02-22

【中文标题】submitForm 上的 Angular 2 RxJS 可观察取消订阅

【英文标题】：Angular 2 RxJS observable unsubcribe on submitForm

【发布时间】：2018-01-19 18:32:26

【问题描述】：

这可能是一个基本问题，但没有找到任何足够的答案。所以这就是为什么我想创建一个 SO。

我有一个带有提交处理程序的表单。

<form class="form login" [formGroup]="loginForm" (ngSubmit)="onSubmit()" novalidate>

在提交时，我调用一个订阅 observable 的函数，该函数执行对 firebase 的 HTTP 调用（使用 AngularFire2 库）。

public onSubmit() : void 
    const values = this.loginForm.value;

    let subscription = this.loginUsernamePassword(values.email, values.password).subscribe((data) => 
        this.processLogin(data);
    , (error) => 
        console.log("erreur" + error);
    , () => 
        console.log("one");
    );

现在假设我多次提交表单，然后创建了多个订阅。我关心的是数据清理（取消订阅），但不知道处理这个问题的最佳方法是什么，尤其是因为这是一个一次性功能。我看到了两种解决方案。

1) 将订阅存储在订阅集合中，当组件被移除时，订阅集合会被销毁“ngOnDestroy”。但我觉得对于这种情况：单个 HTTP 调用，有点奇怪。

2) 在 oberservable 完成后立即取消订阅。

3) .. 还有其他吗？

感谢您的帮助和提示。

【问题讨论】：

我强烈建议您阅读 Ben Lesh 的 "RxJS: Don’t Unsubscribe"

【参考方案1】：

在组件中处理长期订阅的一种方法是通过向订阅添加条件来确保它们被释放，就像这样...

export class MyClass implements OnInit, OnDestroy 
  public isDestroyed = false;
  public someData: Observable<SomeData>;

  public ngOnInit() 
    this.someData = some other source
    .takeWhile(!this.isDestroyed)
    .subscribe(x => x...........);
  

  public ngOnDestroy() 
    this.isDestroyed = true;
  

虽然我怀疑父 observable 可能会保留此订阅，直到传递了 next 值，然后它发现订阅者不再感兴趣。使用takeUntil 可能会更好，因为这需要一个 Observable，您可以调用 next 来立即终止订阅。

在您的情况下，这实际上取决于 this.loginUsernamePassword 的作用。如果是基于http调用的订阅，那么http创建的主题无论如何都会被销毁，然后你的本地订阅也会随之消失。