Как обмениваться данными между (несколько экземплярами) двух несвязанных компонентов?
У меня есть 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);
});
...
}
Ответы 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();
}
Нужна ли вам карта для этого подхода, поскольку может быть несколько пар поиск+таблица, а BehaviorSubject только один?
@bestfirstsearch Я думал, вы хотите отправить только одну таблицу из ее компонента пары поиска, обе имеют один и тот же ключ и используют его для фильтрации и сужения события
@bestfirstsearch Для этого сценария создайте имя события, например 'emitAll', затем вы можете изменить условие if на event.eventName === 'emitAll' || event.eventName === this.searchKey, чтобы несколько таблиц улавливали выброс.
О нет, вы правы, мне нужна только одна таблица из компонента поисковой пары. Я предполагаю, что BehaviorSubject может хранить только одно значение одновременно? Если я не ошибаюсь - я новичок в angular.
Это имеет смысл, спасибо! В этом случае мне также нужно будет выполнить очистку и отписаться от наблюдаемого?
@bestfirstsearch да, ты должен, обновив мой ответ тем же самым!
Посмотрите ngrx.io/guide/comComponent-store возможно, другой способ сделать что-то или такой простой, как вы, сервис. Настройте эту службу в корневом модуле, чтобы один и тот же экземпляр был общим.