Javascript 通过服务和主题在组件之间进行通信

我有一个服务和两个组件。就像一个孩子和父母的关系

子组件具有具有过滤功能的按钮。然后结果将显示在父组件中。我第一次使用它时没有服务，并且在子组件中使用EventEmitter。但现在我已经将api调用放在了一个单独的服务中。所以现在我想用一个主题，而不是一个事件发射器。但现在的问题是，我不知道如何在父组件中显示结果

是时候展示一些代码了。这就是服务：

export class ExtendedSearchService {
  private _filterparticipantByRegistration$ = new Subject<ParticipantInfoDTO[]>();
 data = this._filterparticipantByRegistration$.asObservable();

filerByRegistration(selectedValue: any, startDate: Date): Observable<ParticipantInfoDTO[]> {
    return this.participantService
      .filterParticipantsByRegistration(1, selectedValue as any, moment(startDate).format('YYYY MM D'))
      .pipe();
  }

}

所有这些都有效

但是现在父组件：

searchFor() {
    if (this.selectedSearch === 'Registratie') {
      this.extendedSearchService
        .filerByRegistration(this.selectedValue, this.startDate)
        .subscribe(filterByRegistration => {
          this.filterparticipant.emit(filterByRegistration);
        });
    }
}

applyExtendedFilter(filteredParticipants: ParticipantInfoDTO[]) {
    this.datasource.data = filteredParticipants;
}

因此，在该组件中，结果必须显示在网格中：

  <app-extended-search [@searchOpen]
        (clickCloseSearch)="handleClickCloseSearch()"
        [searchExtended]="searchExpanded"
        (filterparticipant) = "applyExtendedFilter($event)"
        class="extended-search"
        [ngClass]="{expanded: searchExpanded}"
      ></app-extended-search>

所以这是在过去使用EventEmitter。但现在我在服务中使用了一个主题。那么如何替换这个呢

这是父组件的js代码：

searchFor() {
    if (this.selectedSearch === 'Registratie') {
      this.extendedSearchService
        .filerByRegistration(this.selectedValue, this.startDate)
        .subscribe(filterByRegistration => {
          this.filterparticipant.emit(filterByRegistration);
        });
    }
}

applyExtendedFilter(filteredParticipants: ParticipantInfoDTO[]) {
    this.datasource.data = filteredParticipants;
}

这件作品我要改变什么

因此，在父模板中，我有如下内容：

  <app-extended-search [@searchOpen]
        (clickCloseSearch)="handleClickCloseSearch()"
        [searchExtended]="searchExpanded"
        [_filterparticipantByRegistration] = "_filterparticipantByRegistration$.asObservable()"
        class="extended-search"
        [ngClass]="{expanded: searchExpanded}"
      ></app-extended-search>

 applyExtendedFilter(filteredParticipants: ParticipantInfoDTO[]) {
    this.datasource.data = filteredParticipants;
    this.extendedSearchFilterService.filerByRegistration(this.selectedValue, this.startDate);
  }

---

基本上，

主题

就是这样工作的

Parent.Component.html

<app-child [childSubject]="childSubject.asObservable()"></app-child>

<div></div>

Parent.Component.ts

@Output() childSubject: Subject<boolean> = new Subject<boolean>(true);
clickEvent(){
   this.childSubject.next(true);
}

@Input() childSubject: Subject<boolean> = new Subject<boolean>();
this.childSubject.subscribe(res => {
  Console.log(res);
});

@Output（）子主题：主题=新主题（true）；
clickEvent（）{
this.childSubject.next（true）；
}

Child.Component.html

<app-child [childSubject]="childSubject.asObservable()"></app-child>

<div></div>

子组件.ts

@Output() childSubject: Subject<boolean> = new Subject<boolean>(true);
clickEvent(){
   this.childSubject.next(true);
}

@Input() childSubject: Subject<boolean> = new Subject<boolean>();
this.childSubject.subscribe(res => {
  Console.log(res);
});

@Input（）子主题：主题=新主题（）；
this.childSubject.subscribe（res=>{
控制台日志（res）；
});

在您的服务中，\u filterparticipantByRegistration$是私有的。因此，您会出现此错误。

应用程序扩展搜索是子组件之一？是的，抱歉，应用程序扩展搜索是带有筛选按钮的组件，因此您需要在两个子组件之间通信？因此子组件（扩展搜索）是带有按钮的组件。父组件（列表）是必须在模板（htm视图）中显示筛选结果的组件吗？但是为什么要将主题放在带有@ouput的组件中呢？这在我的情况下是行不通的。你能从我的代码中举出一个例子吗。很好，使用服务OK，请创建一个？我将编辑这些代码，并提出解决方案。我使用@Ouput（）将值从父级传递给子级