Angular Observable疑问：未将订阅赋值给变量时是否需取消订阅？

嘿，刚接触Angular的Observable确实容易搞不清订阅清理的问题，我来帮你逐个分析你的场景～

首先先明确一个核心规则：不是所有Observable都需要手动取消订阅。Angular中像HttpClient发起的请求这类Observable，属于「冷Observable」，当请求完成（成功或失败）后，会自动发送complete信号，对应的订阅会自动被清理，不会造成内存泄漏。但如果是像Subject、BehaviorSubject或者interval这类不会自动完成的Observable，就需要我们手动处理订阅的取消，否则组件销毁后订阅仍存在，可能引发内存泄漏或错误。

场景1：组件直接调用HttpService的请求 #

你的代码里，getContactsHttp()返回的是HttpClient.get()的Observable，这类请求Observable在请求结束后会自动完成。所以哪怕你没有把.subscribe()的返回值（Subscription对象）赋值给变量，也不需要手动取消订阅——请求完成后，这个订阅会自动被销毁，不会有内存泄漏问题。

场景2：订阅自定义的Subject #

这里有两个订阅需要分开看：

1. 对httpService.getContactsHttp()的订阅：和场景1一样，属于HttpClient请求，会自动完成，不需要手动取消。
2. 对contacts$这个Subject的订阅：Subject本身不会自动发送complete信号，除非你手动调用contacts$.complete()。如果组件销毁时没有取消这个订阅，订阅会一直存在，后续如果contacts$再发送新值，会尝试触发已经销毁的组件里的回调逻辑，轻则引发错误，重则造成内存泄漏。

那怎么处理这个Subject的订阅呢？给你几个常用方案：

• 方案1：保存Subscription并在ngOnDestroy中取消

  contacts$ = new Subject<any[]>();
  private contactsSubscription!: Subscription;
  
  ngOnInit() {
    this.getContacts();
    this.contactsSubscription = this.contacts$.subscribe((data:any[])=>{
      this.records = this.sortData(data);
    });
  }
  
  ngOnDestroy() {
    this.contactsSubscription.unsubscribe();
    // 也可以顺便complete Subject，避免其他订阅者残留
    this.contacts$.complete();
  }
  

• 方案2：使用async管道（推荐）
  Angular的async管道会自动帮你管理订阅和取消，你可以直接在模板中使用：

  <!-- 模板中 -->
  <div *ngFor="let record of contacts$ | async">...</div>
  

  这样就不需要在组件中手动订阅，组件销毁时async管道会自动取消订阅，非常省心。
• 方案3：使用takeUntil操作符
  适合有多个订阅需要统一管理的场景：

  contacts$ = new Subject<any[]>();
  private destroy$ = new Subject<void>();
  
  ngOnInit() {
    this.getContacts();
    this.contacts$.pipe(takeUntil(this.destroy$)).subscribe((data:any[])=>{
      this.records = this.sortData(data);
    });
  }
  
  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
  

总结 #

• 场景1：无需取消订阅，HttpClient请求自动清理订阅。
• 场景2：对contacts$的订阅必须手动取消（或用自动管理方案），避免内存泄漏；Http请求的订阅无需处理。

内容的提问来源于stack exchange，提问作者Ka Tech