Блог

Главная - Вопросы по программированию - Как мне передать идентификатор и объект при нажатии кнопки из одного компонента в функцию другого компонента в angular?

Как мне передать идентификатор и объект при нажатии кнопки из одного компонента в функцию другого компонента в angular?

#angular #angular8 #angular10 #angular12

#angular #angular8 #angular10 #angular12

Вопрос:

В моем приложении есть 2 компонента. При нажатии кнопки в одном компоненте я хочу вызвать функцию в другом компоненте. Функция принимает идентификатор в качестве аргумента и нуждается в объекте. Я могу отправить либо идентификатор, либо объект из первого компонента с помощью RXJS, но не оба одновременно. Оба эти компонента являются братьями и сестрами. Вот как выглядит мой код.

КОМПОНЕНТ 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.
Я вызываю toggle2 всякий раз, когда вызывается toggle1, и передаю идентификатор, но
не могу передать searchObject.

TIA.

Комментарии:

1. Пожалуйста, опубликуйте код, который вы используете сейчас.

2. может быть, вам подойдет просто вызов функции внутри родительского элемента <child1 (updated)="#child2.callMethod(obj, $event)"/> <child2 #child2/>

Ответ №1:

Для этого вам понадобится сервис и свойство типа subject

 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, и я имею в виду observable. Поэтому, когда ваш второй компонент получит идентификатор или объект, вы можете вызвать функцию (внутри подписки).

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

Не стесняйтесь взглянуть на документацию: https://rxjs.dev/guide/observable

Метки: