Как обмениваться данными между (несколько экземплярами) двух несвязанных компонентов?

У меня есть 2 несвязанных компонента: панель поиска и таблица. У меня есть служба, которая обменивается данными между ними. Проблема в том, что у меня есть несколько экземпляров компонентов «поиск + таблица» в зависимости от поиска. Всякий раз, когда я выполняю поиск, он обновляет все таблицы. Есть ли способ связать одну службу между двумя компонентами?

Я знаю, что могу объединить компонент поиска и таблицы в один компонент, но с учетом того, как настроен мой проект, это усложнит ситуацию, чем она есть сейчас.

Не выдавая слишком много, это то, что у меня есть.

// Data sharing service
import { Injectable } from "@angular/core";
import { BehaviorSubject } from "rxjs";

@Injectable({
    providedIn: 'root'
})
export class DataSharingService {

    private data = new BehaviorSubject<any>(null);
    currData = this.data.asObservable();

    constructor(){}

    updateSearchRes(newData: any){
        this.data.next(newData);
    }
}
// search component
onClick(e: any){
  // get search data
  this.searchResults = this.getSearchResults(e);

  // send data to service
  this.searchResults.forEach(element => {
     this.dataSharingService.updateSearchRes(element);
  });
}
// table component
ngOnInit(){
  ...

  // listen for data
  this.dataSharingService.currData.subscribe(newSearchRes => {
    this.addDataToTable(data);
  });

  ...
}

🤔 А знаете ли вы, что...
Версии Angular выпускаются с учетом совместимости и обратной совместимости, что облегчает обновление приложений на новые версии.


1
50
1

Ответ:

Решено

Вам нужно использовать простое условие if, чтобы ограничить выбросы одной структурой компонента.

HTML-код компонента будет выглядеть так.

...
<app-search searchKey = "home"/>
...
<app-table searchKey = "home"/>
...

Сначала мы преобразуем метод излучения службы, чтобы он отправлял объект с именем события, а не только данные.

// Data sharing service
import { Injectable } from "@angular/core";
import { BehaviorSubject } from "rxjs";

@Injectable({
    providedIn: 'root'
})
export class DataSharingService {

    private data = new BehaviorSubject<any>(null);
    currData = this.data.asObservable();

    constructor(){}

    updateSearchRes(eventName: string, newData: any){
        this.data.next({eventName, data: newData });
    }
}

Теперь, когда вы нажимаете на поиск, вы берете @Input() searchKey = '', этот ключ поиска можно использовать для фильтрации результатов, полученных таблицей.

// search component
...
@Input() searchKey = ''
...

...
onClick(e: any){
  // get search data
  this.searchResults = this.getSearchResults(e);

  // send data to service
  this.dataSharingService.updateSearchRes(this.searchKey, this.searchResults);
}

Затем используйте тот же подход для фильтрации по таблице.

// search component
...
@Input() searchKey = '';
private sub: Subscription = new Subscription();
...

...
// table component
ngOnInit(){
  ...

  // listen for data
  this.sub.add(
    this.dataSharingService.currData.subscribe((event: any) => {
      if (event.eventName === this.searchKey) {
          this.addDataToTable(event.data);  
      }
    })
  );

  ...
}

ngOnDestroy() {
  this.sub.unsubscribe();
}