Angular中点击按钮如何将id和对象从一个组件传递到另一组件的函数

解决方案 #

你可以直接通过RxJS的Subject传递包含id和searchObject的复合对象，不需要限制为单一参数，修改步骤如下：

1. 修改服务代码 #

调整Subject的发送逻辑，支持传递包含多个参数的对象：

// 定义传递参数的类型（可选，建议添加提升类型安全性）
interface ToggleEvent {
  id: number;
  searchObj: any; // 可以替换为你searchObject的实际类型
}

// 把Subject的泛型改为对应类型
private toggleSubject = new Subject<ToggleEvent>();

sendToggleEvent(event: ToggleEvent){
  this.toggleSubject.next(event);
}

getToggleEvent():Observable<ToggleEvent>{
  return this.toggleSubject.asObservable();
}

2. 修改组件1的触发逻辑 #

调用服务方法时同时传入id和本地的searchObject：

searchObject; 
toggle1(id:number){
  // 把两个参数打包成对象传递
  this.dashboardService.sendToggleEvent({
    id: id,
    searchObj: this.searchObject
  });
}

3. 修改组件2的订阅逻辑 #

订阅时从回调参数中解构出需要的两个值即可：

// 建议把订阅逻辑放到ngOnInit而不是constructor中
ngOnInit(){
  this.toggleEventSubscription = 
  this.dashboardService.getToggleEvent().subscribe((event)=>{
    this.toggle2(event.id, event.searchObj);
  });
}

toggle2(id: number, searchObj: any){
  if(id == __){
    api(searchObj)
  }
}

// 组件销毁时取消订阅，避免内存泄漏
ngOnDestroy(){
  this.toggleEventSubscription?.unsubscribe();
}

补充说明 #

• 如果你的searchObject在触发toggle1之前可能会频繁变化，也可以在服务中单独维护searchObject的状态，组件1更新时同步到服务，组件2需要时直接从服务取即可，上述复合传参的方式更适合一次性触发事件的场景。

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