Angular中点击链接时Subscribe多次调用及多订阅合并问题求助

1. 解决重复订阅与API多次调用问题 #

问题根源：组件每次初始化都会创建新的订阅，但未在组件销毁时清理，导致多个订阅同时触发fetchData，进而重复调用API。

实现方案：用Subscription统一管理订阅 #

在右侧组件中添加订阅管理逻辑，组件销毁时取消所有订阅：

import { Subscription } from 'rxjs';
import { OnDestroy } from '@angular/core';

export class RightsideComponent implements OnInit, OnDestroy {
  private subscriptions = new Subscription();
  type: string;

  constructor(private route: ActivatedRoute, private Service: YourService) {}

  ngOnInit(): void {
    this.type = this.route.snapshot.data.router;
    // 将订阅添加到统一管理集合
    this.subscriptions.add(
      this.Service.Number.subscribe(() => {
        this.triggerFetchData();
      })
    );
  }

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

  private triggerFetchData() {
    // 简化重复的条件判断逻辑
    if (['url-1', 'url-2'].includes(this.type)) {
      this.fetchData();
    }
  }

  private fetchData() {
    // 你的API调用逻辑
  }
}

2. 同时监听Details与Number两个Observable #

使用RxJS的merge操作符合并两个流，只要任一Observable发出新值，就触发数据获取：

优化后的右侧组件代码 #

import { Subscription, merge } from 'rxjs';
import { OnDestroy } from '@angular/core';

export class RightsideComponent implements OnInit, OnDestroy {
  private subscriptions = new Subscription();
  type: string;

  constructor(private route: ActivatedRoute, private Service: YourService) {}

  ngOnInit(): void {
    this.type = this.route.snapshot.data.router;
    
    // 合并两个Observable流，任一变化都触发回调
    const combinedTrigger$ = merge(this.Service.Details, this.Service.Number);
    
    this.subscriptions.add(
      combinedTrigger$.subscribe(() => {
        this.triggerFetchData();
      })
    );
  }

  ngOnDestroy(): void {
    this.subscriptions.unsubscribe();
  }

  private triggerFetchData() {
    if (['url-1', 'url-2'].includes(this.type)) {
      this.fetchData();
    }
  }

  private fetchData() {
    // 你的API调用逻辑
  }
}

额外代码错误修正 #

Navbar组件参数传递错误 #

Navigation方法中调用name(this.name)参数传递错误，应传入当前菜单的data：

Navigation(data) {
  this.Service.Details.next(data);
  this.name(data); // 修正为传递当前菜单标题
}

右侧组件条件判断语法错误 #

原代码中else if(this.type="url-2")是赋值操作，需改为相等判断：

// 错误写法
else if(this.type="url-2")
// 修正后
else if(this.type === "url-2")

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