Angular组件Observable取消订阅报错：heartSub与likeSub未定义

你遇到的这个问题其实很常见：heartSub和likeSub这两个订阅变量只有在用户点击对应按钮时才会被赋值，但如果用户在组件生命周期内从未触发过点赞/爱心操作，这两个变量就会一直处于undefined状态，此时在ngOnDestroy()里直接调用unsubscribe()自然会抛出“变量未定义”的错误。

下面给你几个实用的解决方案，按推荐程度排序：

1. 使用Subscription集合统一管理所有订阅（最稳妥的手动方式） #

Angular提供了Subscription类来帮你批量管理多个订阅，完美避免单个变量未定义的问题：

首先在组件里声明一个订阅集合变量：

import { Subscription } from 'rxjs';

export class BlogComponent implements OnInit, OnDestroy {
  private subscriptions = new Subscription(); // 初始化订阅集合

  // ... 其他组件逻辑

  onHeartToggle() {
    // 将订阅添加到集合中
    const heartSub = this.heartService.toggle().subscribe(/* 你的业务逻辑 */);
    this.subscriptions.add(heartSub);
  }

  onLikeToggle() {
    const likeSub = this.likeService.toggle().subscribe(/* 你的业务逻辑 */);
    this.subscriptions.add(likeSub);
  }

  ngOnDestroy() {
    // 统一取消所有订阅，不管用户有没有点击过按钮都不会报错
    this.subscriptions.unsubscribe();
  }
}

这种方式的优势在于，不管用户触发了几次订阅操作，销毁时只需调用一次unsubscribe就能清理所有已创建的订阅，代码也更整洁易维护。

2. 取消订阅前先检查变量是否存在 #

如果不想用集合管理，也可以在销毁时先判断变量是否已定义：

ngOnDestroy() {
  // 先确认变量存在，再执行取消订阅
  if (this.heartSub) {
    this.heartSub.unsubscribe();
  }
  if (this.likeSub) {
    this.likeSub.unsubscribe();
  }
}

这个方法简单直接，但如果后续订阅数量增多，代码会变得冗余繁琐。

3. 使用async管道自动管理订阅（推荐的无手动代码方式） #

如果你的业务逻辑允许，Angular的async管道是最省心的方案——它会自动帮你完成订阅和销毁时的取消订阅操作，完全不用手动写unsubscribe：

比如在组件里把Observable赋值给类变量：

export class BlogComponent {
  // 假设这是返回状态的Observable
  heartStatus$ = this.heartService.getStatus();
  likeStatus$ = this.likeService.getStatus();
}

然后在模板里直接使用async管道绑定状态：

<button class="btn btn-heart" (click)="onHeartToggle()">
  <i class="bi bi-heart{{ heartStatus$ | async ? '-fill' : '' }}"></i>
</button>

<button class="btn btn-like" (click)="onLikeToggle()">
  <i class="bi bi-hand-thumbs-up{{ likeStatus$ | async ? '-fill' : '' }}"></i>
</button>

这样Angular会自动处理订阅的生命周期，你完全不用在ngOnDestroy里写任何取消订阅的代码，自然也不会出现变量未定义的问题。

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