Angular 捕获另一页上的事件发射器时出现问题

我有一个图标/角度应用程序，它有一个过滤器选项卡，然后在下面有一个列表。其思想是在用户更改过滤器时发出一个事件，然后列表页面捕获发出的事件并刷新过滤器中最后一个事件的数据

下面是我在筛选页面上使用的代码

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;
    }
  }

导出类TabsFilterListComponent实现OnInit{
过滤器=“”；
@Input（）过滤器：数组；
@Output（）filterSelected:EventEmitter=new EventEmitter（）；
构造函数（）{}
ngOnInit（）：void{
log（this.filters）；
}
切换过滤器（过滤器：ITabFilter）{
this.filters.forEach（当前=>{
if（current.type！==filter.type）{
current.isOpened=false；
}
});
filter.isopend=！filter.isopend；
}
选项已选择（所选：IActiveTabFilter，筛选器：ITabFilter）{
//如果未更改筛选器，请确保不发出事件
console.log（选中）；
if（！（filter.selectedOption&&filter.selectedOption.value==selected.option.value））{
filter.selectedOption=selected.option；
//发射事件
this.filterSelected.emit（选中）；
console.log（“已发出”，选中）；
}
如果（过滤器）{
filter.isOpened=false；
}
}

---

我将如何在列表中订阅什么来捕获发射事件，以及如何获取所选值？

由于您没有在父组件中显示HTML，我无法确定您的问题是什么，因为这是您在发射事件和父组件中的方法之间建立连接的地方。我希望父组件HTML的外观如下所示：

---

（filterSelected）=“刷新数据（$event）”

使用父组件中名为refreshData的方法连接子组件中的@Output，filterSelected。$event将包含可用于刷新数据的IActiveTabFilter对象。

从注释中删除该对象，以便我可以显示代码。您可以创建一个发出使用任何组件都可以订阅的最新过滤器进行观察

警告：这不是经过测试的代码

此服务使用一个rxjs主题，它将向订阅者发送最新的值。您订阅可观察的“过滤器”，并调用方法setFilter来设置值

从'@angular/core'导入{Injectable}；
从'rxjs'导入{Subject}；
@注射的({
providedIn:'根'
})
导出类筛选器服务{
private_filter=新主题（）；
filter=this.\u fiter.asObservable（）；
构造函数（）{}
公共设置过滤器（过滤器：ITabFilter）：无效{
此._filter.next（filter）；
}
}

只要代码中有一部分知道最新的过滤器，就可以这样调用setFilter

。。。
过滤器：ITabFilter；
...
构造函数（私有filterSvc:FilterService）{}
...
this.filterSvc.setFilter（this.filter）

然后在需要过滤数据的地方，你可以像这样订阅可观测数据

过滤器：ITabFilter；
构造函数（私有filterSvc:FilterService）{}
...
this.filterSvc.filter
.订阅（筛选器=>{
this.filter=过滤器；
}，（错误）=>{
console.log（错误）；
});

我不想在HTML模板上使用emit。我想在我的组件文件中重新加载一个新请求，以获取基于过滤器的数据。你可以使用observable，然后从另一个页面订阅它吗？那么，我如何订阅事件发射器呢？我以前使用过角度材质和使用compone的对话框nt参考资料，但不确定我在这里会怎么做