Angular Rxjs可观测生命周期

如果我使用rxjs，我通常会在我的组件文件中，通过将所述订阅推送到订阅数组中来跟踪我的所有订阅：

现在，我遇到了一些我认为很有趣的事情。如果我需要订阅服务中的可观察项：

this.myService.myObservable.subscribe(...)

谁拥有订阅？是我的组件拥有它，还是服务拥有它？换言之，我的服务是否需要实现Ngondestry以取消订阅该可观察到的服务

我想做：this.subscriptions.pushthis.myService.myObservable.subscription。。。；可能有用，但我不完全确定。

打电话。订阅。。。在一个可观察对象上返回一个订阅

如果不将此订阅分配给变量，或者在您的情况下将其推送到订阅数组，则将丢失对此订阅的引用，因此无法取消订阅，这可能会导致内存泄漏

因此，您假设将其推送到订阅阵列中：

this.subscriptions.push(this.myService.myObservable.subscribe(...));

取消订阅组件的Ngondestory是正确的。

另一个选项是使用takeWhile或类似的标记，如下面的componentActive标记。类似于下面显示的代码

这将完成订阅，因此您无需取消订阅

import { Component, OnInit, OnDestroy } from '@angular/core';

import { Product } from '../product';

import { Observable } from 'rxjs';
import { takeWhile } from 'rxjs/operators';

/* NgRx */
import { Store, select } from '@ngrx/store';

@Component({
  selector: 'pm-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit, OnDestroy {
  componentActive = true;

  // Used to highlight the selected product in the list
  selectedProduct: Product | null;

  constructor(private store: Store<fromProduct.State>) { }

  ngOnInit(): void {

    // Subscribe here because it does not use an async pipe
    this.store.pipe(
      select(fromProduct.getCurrentProduct),
      takeWhile(() => this.componentActive)
    ).subscribe(
      currentProduct => this.selectedProduct = currentProduct
    );

  }

  ngOnDestroy(): void {
    this.componentActive = false;
  }

}

---

FWIW不需要维护自己的订阅数组并在其上循环，只需保留一个订阅并将这些订阅添加到其中即可。减少您的工作量：this.subscriptions=新订阅；这个.subscriptions.addobservable.subscripte。。。；以及以后的'this.subscriptions.unsubscribe；//取消他们所有人的订阅。此模式还可以处理一些微妙的用例，在主订阅取消订阅后，您可能会添加订阅。这应该是实现此目的的方法。BenLesh的这篇文章很好地解释了这一点：我们在整个应用程序中都使用这种方法——它工作得完美、漂亮、干净。我们现在存储订阅的唯一时间是在组件的生命周期内出于功能原因手动取消订阅。

import { Component, OnInit, OnDestroy } from '@angular/core';

import { Product } from '../product';

import { Observable } from 'rxjs';
import { takeWhile } from 'rxjs/operators';

/* NgRx */
import { Store, select } from '@ngrx/store';

@Component({
  selector: 'pm-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit, OnDestroy {
  componentActive = true;

  // Used to highlight the selected product in the list
  selectedProduct: Product | null;

  constructor(private store: Store<fromProduct.State>) { }

  ngOnInit(): void {

    // Subscribe here because it does not use an async pipe
    this.store.pipe(
      select(fromProduct.getCurrentProduct),
      takeWhile(() => this.componentActive)
    ).subscribe(
      currentProduct => this.selectedProduct = currentProduct
    );

  }

  ngOnDestroy(): void {
    this.componentActive = false;
  }

}