Angular 17中使用takeUntilDestroyed时如何调用额外销毁方法

有两种简单的解决方案可以实现你要的效果：

方案一：用DestroyRef的onDestroy注册清理回调 #

这是最贴合Angular 17新特性的写法，直接通过destroyRef注册组件销毁时要执行的逻辑，和takeUntilDestroyed的销毁时机完全一致：

import { Component, DestroyRef, inject } from '@angular/core';
// 假设TestService是你的服务类
import { TestService } from './test.service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  private destroyRef = inject(DestroyRef);
  private test = inject(TestService);

  constructor() {
    // 注册销毁时的清理逻辑
    this.destroyRef.onDestroy(() => {
      this.test.clearSelectedCases();
    });

    // 你的订阅逻辑，用takeUntilDestroyed管理
    someObservable$.pipe(
      takeUntilDestroyed(this.destroyRef)
    ).subscribe(data => {
      // 处理订阅数据
    });
  }
}

方案二：保留ngOnDestroy接口 #

Angular 17并没有废弃OnDestroy接口，你可以继续实现这个接口来执行清理逻辑，同时用takeUntilDestroyed管理订阅，两者完全兼容：

import { Component, DestroyRef, inject, OnDestroy } from '@angular/core';
import { TestService } from './test.service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnDestroy {
  private destroyRef = inject(DestroyRef);
  private test = inject(TestService);

  ngOnDestroy(): void {
    this.test.clearSelectedCases();
  }

  constructor() {
    someObservable$.pipe(
      takeUntilDestroyed(this.destroyRef)
    ).subscribe(data => {
      // 处理订阅数据
    });
  }
}

两种方案都能达到目的，选哪种看你个人习惯——方案一更偏向Angular新的依赖注入式销毁管理，方案二更贴近你之前的写法。

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