Angular订阅多次触发问题：点击导航栏后订阅重复执行的解决办法

架构老林

2026-8-6

问题分析

你的问题根源在于BehaviorSubject的特性：它会缓存最新的发送值，当组件订阅时会立即推送这个缓存值。同时如果组件多次初始化（比如路由反复跳转），每次ngOnInit都创建新订阅却未取消，就会导致多个订阅实例存在，每次调用next时所有订阅都会触发，出现多次执行的情况。另外，若在组件ngOnInit执行前就调用了next，当组件最终订阅时也会立刻收到缓存的最新值，这也会造成不符合预期的触发。

解决方案

方案1：改用Subject替代BehaviorSubject

如果不需要初始值，把Service中的BehaviorSubject换成普通Subject。Subject不会缓存值，只有在订阅之后发送的next才会被订阅者接收，从根源避免订阅时的自动触发：

// service文件中修改
import { Subject } from 'rxjs';

List = new Subject<any>();

方案2：用take(1)确保订阅仅执行一次

保留BehaviorSubject的前提下，使用RxJS的take(1)操作符，让订阅仅接收一次最新值后自动取消，避免重复触发：

// 目标组件的ngOnInit中修改
import { take } from 'rxjs/operators';

ngOnInit(): void {
  this.Service.List.pipe(take(1)).subscribe(response => {
    console.log('function called ');
  });
}

方案3：手动管理订阅生命周期（防止内存泄漏+重复订阅）

如果需要持续监听但避免多实例订阅，在组件销毁时手动取消订阅：

// 目标组件中修改
import { Subscription } from 'rxjs';

private listSubscription: Subscription;

ngOnInit(): void {
  this.listSubscription = this.Service.List.subscribe(response => {
    console.log('function called ');
  });
}

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