Angular中点击链接Subscribe多次触发，loadListData重复调用问题

问题根源 #

你当前的代码存在订阅泄漏：每次组件执行ngOnInit时，都会给Service.ReloadList新增一个订阅，但组件销毁时没有取消这些订阅。如果组件被多次初始化（比如路由反复切换、组件被复用等），订阅会不断堆积，导致每次调用next(true)时，所有存活的订阅都会触发一次loadListData()，最终出现单次点击调用8-9次的情况。

可行解决方案 #

方案1：用takeUntil统一管理订阅（推荐）

通过一个Subject标记组件销毁状态，自动清理所有订阅，避免泄漏：

import { Subject } from 'rxjs';
import { takeUntil, filter, delay } from 'rxjs/operators';

export class YourComponent implements OnInit, OnDestroy {
  private readonly destroy$ = new Subject<void>();

  ngOnInit(): void {
    this.Service.ReloadList.pipe(
      takeUntil(this.destroy$), // 组件销毁时自动取消订阅
      filter(data => data), // 过滤掉false值，替代if判断
      delay(1000) // 用RxJS的delay替代setTimeout，更贴合响应式风格
    ).subscribe(() => {
      this.loadListData();
    });
  }

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

  select(type: any): void {
    this.Service.ReloadList.next(true);
  }
}

方案2：手动保存订阅实例，销毁时取消

如果不想引入额外的Subject，可以手动存储订阅对象，在组件销毁时调用unsubscribe()：

import { Subscription } from 'rxjs';
import { filter, delay } from 'rxjs/operators';

export class YourComponent implements OnInit, OnDestroy {
  private reloadSub?: Subscription;

  ngOnInit(): void {
    this.reloadSub = this.Service.ReloadList.pipe(
      filter(data => data),
      delay(1000)
    ).subscribe(() => {
      this.loadListData();
    });
  }

  ngOnDestroy(): void {
    this.reloadSub?.unsubscribe();
  }

  select(type: any): void {
    this.Service.ReloadList.next(true);
  }
}

方案3：用async管道自动管理订阅（适合模板绑定场景）

如果你的业务逻辑允许将订阅移到模板中，async管道会自动在组件销毁时取消订阅：

// 组件类
import { filter, delay } from 'rxjs/operators';

export class YourComponent implements OnInit {
  reloadList$ = this.Service.ReloadList.pipe(
    filter(data => data),
    delay(1000)
  );

  ngOnInit(): void {
    this.reloadList$.subscribe(() => this.loadListData());
  }

  select(type: any): void {
    this.Service.ReloadList.next(true);
  }
}

不过这种方式更适合直接将数据绑定到模板的场景，对于单纯触发方法的需求，前两种方案更直接。

关键注意点 #

• 务必在组件销毁时清理所有手动创建的订阅，这是Angular开发中避免内存泄漏和重复触发的核心原则；
• 尽量用RxJS操作符（如delay、filter）替代原生setTimeout和条件判断，让代码更符合响应式编程范式，也更容易维护。

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