Angular 13锚点点击PDF后，页面控件触发重复调用问题求助

核心问题 #

重复调用的根源在于：

• combineLatest 会监听所有传入 Observable 的变化，只要其中任一 Observable 发射新值，就会重新触发整个数据流。
• onSendPdf 每次调用都会创建新订阅，但这些订阅未被主动销毁，当后续页面操作导致 Service 中的 EmploymentName/EmploymentCountry 等 Observable 更新时，旧订阅会被再次触发，重复执行 PDF 生成逻辑。

解决方案 #

1. 限制流仅执行一次（推荐） #

在 onSendPdf 的数据流中添加 take(1) 操作符，确保只获取当前最新值，流完成后自动取消订阅，避免后续触发：

import { take } from 'rxjs/operators';

onSendPdf() {
  this.getInformation()
    .pipe(
      take(1), // 仅取一次最新值，完成后自动终止订阅
      map((val1) => this.generateAppLoad(...val1)),
      switchMap((param) => this.EmpService.generateForm(param, this.EmpId))
    ).subscribe({
      next: (response) => {
        const file = new Blob([response], { type: 'application/pdf' });
        const fileURL = URL.createObjectURL(file);
        window.open(fileURL);
      },
      error: (error) => {
        console.log('error')
      }
    })
}

2. 手动管理订阅生命周期 #

若需保留订阅（此场景不推荐），可在组件中维护订阅集合，销毁时统一取消：

import { Subscription } from 'rxjs';

// 组件类内声明订阅集合
private subscriptions = new Subscription();

onSendPdf() {
  const pdfSub = this.getInformation()
    .pipe(
      map((val1) => this.generateAppLoad(...val1)),
      switchMap((param) => this.EmpService.generateForm(param, this.EmpId))
    ).subscribe({
      next: (response) => {
        const file = new Blob([response], { type: 'application/pdf' });
        const fileURL = URL.createObjectURL(file);
        window.open(fileURL);
      },
      error: (error) => {
        console.log('error')
      }
    });
  
  // 将订阅加入集合
  this.subscriptions.add(pdfSub);
}

// 组件销毁时取消所有订阅
ngOnDestroy() {
  this.subscriptions.unsubscribe();
}

3. 检查 Service 中 Observable 类型 #

若 Service 内的 EmploymentName 等是 BehaviorSubject，确认是否在页面操作（如返回按钮）时被意外更新。若这些值无需后续变化，可改用 Subject 或在取值时获取快照。

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