如何在单击按钮时将 id 和对象从一个组件传递到另一个组件的 Angular 函数？答案

【问题标题】：How do I pass an id and object on click of a button from one component to another component' s function in angular?如何在单击按钮时将 id 和对象从一个组件传递到另一个组件的 Angular 函数？
【发布时间】：2021-12-05 12:24:29
【问题描述】：

我的应用中有 2 个组件。单击一个组件中的按钮时，我想调用另一个组件中的函数。该函数将 id 作为参数并需要一个对象。我可以使用 RXJS 从第一个组件发送 id 或对象，但不能同时发送两者。这两个组件都是兄弟姐妹。这是我的代码的样子。

组件 1：-

     searchObject; 
     toggle1(id:number){
     
     this.dashboardService.sendToggleEvent(id);
     }

服务：-

 sendToggleEvent(id:number){

    this.toggleSubject.next(id);
        }

    getToggleEvent():Observable<any>{

    return this.toggleSubject.asObservable();
      }

组件 2：-

constructor(){

     this.toggleEventSubscription = 
     this.dashboardService.getToggleEvent().subscribe((id)=>{
     this.toggle2(id);
     });
   }

    toggle2(id){
      if(id == __){
      api(searchObj)
      }

toggle2 有一个 api，需要一个名为 searchObj 的对象，该对象位于组件 1。每当调用 toggle1 并传递 id 时，我都会调用 toggle2 但是无法通过 searchObject。

TIA。

【问题讨论】：

请发布您现在使用的代码。
也许只调用父函数内部的函数适合你<child1 (updated)="#child2.callMethod(obj, $event)"/> <child2 #child2/>

标签： angular angular8 angular10 angular12

【解决方案1】：

您需要为此提供服务和主题类型的属性

service.ts 
mySub = new Subject();


componet1 
this.myService.mySub.next({id:123,data:{}})


component2
this.myService.mySub.subScribe(event=>{
  this.callfn(event.id,event.data)
})

【讨论】：

【解决方案2】：

没有代码很难帮助你，但我会努力的。

所以你使用的是 RXJS，我的意思是可观察的。因此，当您的第二个组件收到 id 或对象时，您可以调用该函数（在订阅内）。

observable.subscribe({
  next(x) { callFunction(x) },
  error(err) { console.error('something wrong occurred: ' + err); },
  complete() { console.log('done'); }
});

不要犹豫，看看文档：https://rxjs.dev/guide/observable

【讨论】：