Angular 如何正确地从可观察的角度7退订？

我目前正在考虑确保我的应用程序没有内存泄漏。我在下面的教程中演示了如何从使用

subscribe（）

更改为

async

，以及如何在

ngondestory

期间显式取消订阅

我正在努力测试我的实现是否有效，我想知道我在项目中的实现是否真的取消了订阅

以下是本教程中his组件的内容：

@Component({
  /* ... */
  template: `
    <ul *ngIf="todos.length > 0">
      <li *ngFor="let todo of todos">{{todo.name}}</li>
    </ul>   
  `
})
export class TodosComponent implements OnInit, OnDestroy {
  private unsubscribe$ = new Subject<void>();

  todos: Todo[];

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

  ngOnInit() {
    this.store
      .pipe(select(selectTodos), takeUntil(this.unsubscribe$)) // unsubscribe to prevent memory leak
      .subscribe(todos => this.todos = todos);            // unwrap observable
  }

  ngOnDestroy(): void {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }
}

---

所以服务可以正常工作，但我只想知道我的实现是否正确？我不确定选择功能是什么，或者这是否只适用于他正在使用的功能。如果我能提供信息，请告诉我。

在教程中，他正在使用Rgrx商店。这个商店可以在多种情况下产生价值。所以这不是一次性的事情。出于同样的原因，有必要取消订阅可观察的

在您的示例中，您正在调用

insightsService.GetLatestsSinSights（5）

，它将返回一个

可观察的

。但我认为这只是一次性的，因为在您的

getLatestsInsights

中，您很可能返回了一个

可观察的

，它是由

HttpClient

中的一个方法返回的。这些方法通常只返回一次值就可以完成的观察值。我只是在这里假设。如果我错了，请纠正我

因此，如果真的是这样，那么你根本不需要从你的

订阅中
取消订阅
，更不用说考虑是否正确

您可以通过Rxjs销售线索who了解更多关于何时取消订阅的信息

在本教程中，他使用的是Rgrx商店。这个商店可以在多种情况下产生价值。所以这不是一次性的事情。出于同样的原因，有必要取消订阅可观察的

在您的示例中，您正在调用
insightsService.GetLatestsSinSights（5）
，它将返回一个
可观察的
。但我认为这只是一次性的，因为在您的
getLatestsInsights
中，您很可能返回了一个
可观察的
，它是由
HttpClient
中的一个方法返回的。这些方法通常只返回一次值就可以完成的观察值。我只是在这里假设。如果我错了，请纠正我

因此，如果真的是这样，那么你根本不需要从你的
订阅中
取消订阅
，更不用说考虑是否正确

您可以通过Rxjs销售线索who了解更多关于何时取消订阅的信息

这很有趣，但我找不到这个问题的任何完整答案，我找到了三种方法，但我不确定它们是否绝对正确，所以如果有人知道更好的解决方案，请提供它。
!!! 下面代码的重要语法未检查

第一种解决方案是将订阅分配给变量，然后使用它取消订阅
这很有趣，但我找不到这个问题的任何完整答案，我找到了三种方法，但我不确定它们是否绝对正确，所以如果有人知道更好的解决方案，请提供它。
!!! 下面代码的重要语法未检查

第一种解决方案是将订阅分配给变量，然后使用它取消订阅
是的，您是正确的，它是从
HttpClient
返回的。好的，我去看看那篇文章。谢谢你的解释！出于好奇，我在当前状态下取消订阅工作的方式是吗？是的，您是正确的，它是从
HttpClient
返回的。好的，我去看看那篇文章。谢谢你的解释！出于好奇，我在当前状态下取消订阅工作的方式会是什么？
this.insightsService.getLatestsInsights(5)
      .pipe(takeUntil(this.unsubscribe$))
      .subscribe(z => {
        if (z != null) {
          this.latestInsights = z;
          this.visibleSlides = z.slice(0, this.amountOfSlidesToShow);
        }
      })

public mySubscription: Observable<Array<Something>>;

export class someComponent OnInit, OnDestroy {


  constructor(private myService: MyService) {}

  ngOnInit() {

      this.mySubscription = this.myService.someMethod().subscribe(response => ... do something);
  }

  ngOnDestroy() {
     this.mySubscription.unsubscribe();
  }

.....

....

import { Subscription } from 'rxjs/Subscription';

....

private subscription = new Subscription();

public mySubscription1: Observable<Array<Something>>;
public mySubscription2: Observable<Array<Something>>;

export class someComponent OnInit, OnDestroy {


    constructor(private myService: MyService) { }

    ngOnInit() {

        this.mySubscription1 = this.myService.someMethod().subscribe(response => ... do something);
        this.subscription.add(this.subscription.add(this.mySubscription1));

        this.mySubscription2 = this.myService.someMethod().subscribe(response => ... do something);
        this.subscription.add(this.subscription.add(this.mySubscription1));
    }

    ngOnDestroy() {

        if (this.subscription) {
            this.subscription.unsubscribe();
        }
    }

.....

....

import { Subject } from 'rxjs';

....

private unsubscribe = new Subject();

export class someComponent OnInit, OnDestroy {

    constructor(private myService: MyService) { }

    ngOnInit() {

        this.myService.someMethod()
            .pipe(takeUntil(this.unsubscribe))
            .subscribe(response => ... do something);

    }

    ngOnDestroy() {

        this.unsubscribe.next();
        this.unsubscribe.complete();
    }

.....