是否需要保留merge操作符的订阅并在组件销毁时取消订阅？

Great question! Let's walk through this clearly since handling RxJS subscriptions properly is key to avoiding memory leaks in Angular apps.

First, let's look at your code:

merge(this.sort.sortChange, this.paginator.page)
  .pipe(tap(() => this.loadLessonsPage()))
  .subscribe();

The short answer is yes, you do need to clean up this subscription—here's why and how:

Why cleanup is necessary #

Observables like sortChange (from MatSort) and page (from MatPaginator) are long-lived, user-triggered streams—they don't automatically "complete" on their own when your component is destroyed. If you leave this subscription hanging, it can lead to memory leaks: the subscription will keep listening for events even after the component is gone, and any logic in tap (like loadLessonsPage) might still run when the component no longer exists, causing unexpected behavior.

How to handle cleanup properly #

You have two common, reliable approaches in Angular:

1. Manual unsubscribe with a Subscription container #

Store your subscription in a Subscription object, then call unsubscribe() in the ngOnDestroy hook:

import { Subscription } from 'rxjs';
// ... other imports

@Component({ /* ... */ })
export class YourComponent implements OnInit, OnDestroy {
  private subscriptions = new Subscription();

  ngOnInit(): void {
    const lessonSubscription = merge(this.sort.sortChange, this.paginator.page)
      .pipe(tap(() => this.loadLessonsPage()))
      .subscribe();

    this.subscriptions.add(lessonSubscription);
  }

  ngOnDestroy(): void {
    this.subscriptions.unsubscribe();
  }
}

This works well if you only have a few subscriptions to manage—it's straightforward and explicit.

2. Use the takeUntil operator (community-recommended) #

For a cleaner approach (especially with multiple subscriptions), use a "destroy subject" to automatically cancel all streams when the component is destroyed:

import { Subject, merge } from 'rxjs';
import { takeUntil, tap } from 'rxjs/operators';
// ... other imports

@Component({ /* ... */ })
export class YourComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();

  ngOnInit(): void {
    merge(this.sort.sortChange, this.paginator.page)
      .pipe(
        tap(() => this.loadLessonsPage()),
        takeUntil(this.destroy$)
      )
      .subscribe();
  }

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

When ngOnDestroy runs, we send a value to destroy$, and takeUntil will immediately unsubscribe from the merged stream. This is scalable—you can add this operator to all your component subscriptions and clean them up in one place.

Is there any case I don't need to unsubscribe? #

Only if the observable is short-lived and completes on its own (like an HTTP request from HttpClient, which emits once then completes). But since sortChange and page are event streams that keep emitting as the user interacts with the UI, they don't complete automatically—so cleanup is mandatory here.

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