Angular 5：使用Subject是否需要执行unsubscribe操作？

嘿，这个问题问得特别实在！很多人看官方教程的时候都会忽略这个细节，我来给你掰扯清楚～

一、是否需要执行unsubscribe？ #

答案是：分情况，但绝大多数生产场景下建议手动处理，除非你用了Angular的async管道。

官方英雄指南的示例可能是为了简化教学，或者默认用了async管道（这种情况Angular会自动帮你清理订阅），所以没写unsubscribe代码。但如果是你在组件类里手动调用了.subscribe()方法，那必须手动取消订阅，不然会有内存泄漏风险。

二、为什么需要（或不需要）？ #

不需要的场景：用了async管道 #

当你把Subject转换后的Observable通过| async管道绑定到模板时，Angular会自动跟踪这个订阅。一旦组件销毁，async管道会自动调用unsubscribe()，完全不用你操心。这也是Angular官方推荐的方式，省心又安全。

需要的场景：手动订阅 #

Subject是多播Observable，当你在组件类里手动调用.subscribe()后，这个订阅会一直存在，直到你主动取消。如果组件销毁后订阅还没取消：

• 组件实例无法被垃圾回收，造成内存泄漏；
• 如果Subject是来自全局服务的单例，那组件销毁后，订阅回调还会被触发，可能导致不必要的API请求或逻辑执行，引发bug。

三、正确的实现方式 #

方式1：用async管道（推荐） #

这是最简洁安全的做法，完全不用手动管理订阅：

// 组件类
import { Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';

@Component({
  template: `
    <input (input)="search($event.target.value)">
    <div *ngFor="let hero of filteredHeroes$ | async">
      {{ hero.name }}
    </div>
  `
})
export class HeroSearchComponent {
  searchTerms = new Subject<string>();
  filteredHeroes$: Observable<Hero[]>;

  constructor(private heroService: HeroService) {}

  ngOnInit() {
    this.filteredHeroes$ = this.searchTerms.pipe(
      debounceTime(300), // 防抖300ms
      distinctUntilChanged(), // 避免重复输入相同内容
      switchMap(term => this.heroService.searchHeroes(term)) // 切换到新的搜索请求
    );
  }

  search(term: string): void {
    this.searchTerms.next(term);
  }
}

方式2：手动订阅时用takeUntil清理 #

如果必须手动订阅（比如需要在回调里做额外逻辑），推荐用takeUntil操作符，一次性管理所有订阅：

import { Subject, Subscription } from 'rxjs';
import { debounceTime, distinctUntilChanged, switchMap, takeUntil } from 'rxjs/operators';

@Component({...})
export class HeroSearchComponent {
  searchTerms = new Subject<string>();
  filteredHeroes: Hero[] = [];
  // 定义一个销毁信号Subject
  private destroy$ = new Subject<void>();

  constructor(private heroService: HeroService) {}

  ngOnInit() {
    this.searchTerms.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      switchMap(term => this.heroService.searchHeroes(term)),
      takeUntil(this.destroy$) // 直到destroy$发出信号，自动取消订阅
    ).subscribe(heroes => {
      this.filteredHeroes = heroes;
      // 这里可以加额外的逻辑，比如日志、状态更新等
    });
  }

  search(term: string): void {
    this.searchTerms.next(term);
  }

  ngOnDestroy() {
    // 发出销毁信号并完成Subject
    this.destroy$.next();
    this.destroy$.complete();
  }
}

方式3：手动保存Subscription对象 #

这种方式适合单个订阅的场景，但多个订阅时会比较繁琐：

@Component({...})
export class HeroSearchComponent {
  searchTerms = new Subject<string>();
  filteredHeroes: Hero[] = [];
  private searchSubscription: Subscription;

  constructor(private heroService: HeroService) {}

  ngOnInit() {
    this.searchSubscription = this.searchTerms.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      switchMap(term => this.heroService.searchHeroes(term))
    ).subscribe(heroes => {
      this.filteredHeroes = heroes;
    });
  }

  search(term: string): void {
    this.searchTerms.next(term);
  }

  ngOnDestroy() {
    // 手动取消订阅
    if (this.searchSubscription) {
      this.searchSubscription.unsubscribe();
    }
  }
}

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