Проблема с перехватом эмиттера событий на другой странице

Question

У меня есть приложение Iconi c / Angular, в котором есть вкладка «Фильтр», а под ним - список. Идея состоит в том, чтобы go и генерировать событие, когда пользователь меняет фильтр, а затем страница списка улавливает испущенное событие и обновляет данные последнего из фильтра.

Вот код, который я использую на своем Страница фильтра

export class TabsFilterListComponent implements OnInit {
  filter = '';
  @Input() filters: Array<ITabFilter>;
  @Output() filterSelected: EventEmitter<IActiveTabFilter> = new EventEmitter<IActiveTabFilter>();

  constructor() { }

  ngOnInit(): void {
    console.log(this.filters);
  }

  toggleFilter(filter: ITabFilter) {

    this.filters.forEach(current => {
      if (current.type !== filter.type) {
        current.isOpened = false;
      }
    });
    filter.isOpened = !filter.isOpened;
  }

  optionSelected(selected: IActiveTabFilter, filter: ITabFilter) {
    // make sure not to emit event if filter was not changed
   console.log(selected);
    if (!(filter.selectedOption && filter.selectedOption.value === selected.option.value)) {
      filter.selectedOption = selected.option;
      // emit event
      this.filterSelected.emit(selected);
      console.log('emitted ', selected);
    }
    if (filter) {
      filter.isOpened = false;
    }
  }

Как и на что мне подписаться в моем списке, чтобы поймать событие emit и как получить выбранное значение?

Answer 1

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

Предупреждение: это не проверенный код.

This служба использует rx js Subject, который отправит последнее значение подписчику. Вы подписываетесь на наблюдаемый «фильтр» и вызываете метод setFilter для установки значения.

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class FilterService {
  private _filter = new Subject<ITabFilter>();
  filter = this._fiter.asObservable();

  constructor() { }

  public setFilter(filter: ITabFilter): void {
    this._filter.next(filter);
  }
}

Вы вызываете setFilter, как это, везде, где часть вашего кода знает последний фильтр.

...
filter: ITabFilter;

...
constructor(private filterSvc: FilterService) {}

...
this.filterSvc.setFilter(this.filter)

А там, где необходимы данные фильтра, вы можете подписаться на наблюдаемое, вот так

filter: ITabFilter;

constructor(private filterSvc: FilterService) {}
...

this.filterSvc.filter
.subscribe(filter => {
  this.filter = filter;
}, (error) => {
  console.log(error);
});

Answer 2

Поскольку вы не показывали HTML в родительском компоненте, я не могу быть уверен, в чем заключается ваша проблема, поскольку именно здесь вы устанавливаете связь между отправленным событием и методом в родительском компоненте. Я ожидаю, что родительский компонент HTML будет выглядеть примерно так:

<child-component-selector
  [filters]="filterFromParent"
  (filterSelected)="refreshData($event)">
</child-component-selector>

(filterSelected)="refreshData($event)" соединяет ваш @Output, filterSelected, от дочернего элемента с методом в родительском компоненте, который я назвал refreshData. $ event будет содержать ваш объект IActiveTabFilter, который вы можете использовать для обновления sh данных.