在模板内部使用async管道，并避免（尽可能）在组件内部订阅。如果必须在组件（.ts文件）内部订阅，请使用以下方法取消订阅。不要在服务内部这样做！

export class MyComponent {

   private readonly onDestroy = new Subject<void>();

   products$: Observable<Product>;

   constructor(private myService: MyService) { }
   
   ngOnInit(): void {
    
    // the right way
    // don't forget to use the async pipe inside the template
    this.products$ = this.myService.getMyProducts(); 

    // not the best way
    this.myService.getMyProducts().pipe(
      takeUntil(this.onDestroy),
      tap((products: Product) => {
         
         // do your staff
         
      })
    ).subscribe()

   }
   
   ngOnDestroy() {
     this.onDestroy.next();
     this.onDestroy.complete();
   }

}

这是一个非常普遍的问题，你可以在google的任何地方找到，比如这篇文章https://www.digitalocean.com/community/tutorials/angular-takeuntil-rxjs-unsubscribe
你可以做一些

var.pipe(takeUntil(this.unsubscribe$)).subscribe()

也可以将其分配给订阅

this.sub = var.subscribe()

然后在onDestroy中执行

this.sub.unsubscribe();

无论哪种方式，本文都有很好的示例

你不需要unsubscribe和observable，而是subscription。Observables是lazy，除非你对它们执行subscribe，否则它们不会触发。你可以简单地将subscribe转换为observable，并将其存储在一个变量中。然后对该变量调用.unsubscribe()。
这是一个很好的read