Связь между компонентами через службу и субъект - PullRequest
Новая
       53

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

0 голосов
/ 23 октября 2019

У меня есть служба и два компонента. Как дочерние родительские отношения.

И у дочернего компонента есть кнопка с функцией фильтра. И тогда результаты будут показаны в родительском компоненте. Сначала он был без службы, и я использовал EventEmitter в дочернем компоненте. Но теперь я поместил вызовы API в отдельный сервис. Так что теперь я хочу использовать тему, а не EventEmitter. Но проблема в том, что теперь я не знаю, как показать результаты в родительском компоненте.

Время показывать некоторый код. Итак, это сервис: 


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

}

И дочерний компонент:

Это кнопка на дочернем компоненте 

 <button
        [disabled]="!buttonFilterDisabled || !selectedValue || !selectedValueOptie || !startDate || !selectedQrcode"
        mat-raised-button
        color="accent"
        class="Button"
        (click)="searchFor()"
      >
        Filter
      </button>

И вот я использую сервисв дочернем компоненте: 

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

И все это работает.

Но теперь родительский компонент:

Так что в этом компоненте результаты должны быть показаны в сетке: 

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

Так что я объясню. Это примерно так: 

   (filterparticipant) = "applyExtendedFilter($event)"

Так что это было в прошлом при использовании EventEmitter. Но сейчас я использую тему в сервисе. Итак, как заменить это?

и это код js компонента Parent: 

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>

Тогда я получу эту ошибку:

Невозможно выполнить привязку к _filterparticipantByRegistration ', поскольку она не известнасвойство 'app-extended-search'.

А в родительском компоненте у меня это так: 

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

1 Ответ

0 голосов
/ 23 октября 2019

По сути, так работает Subject.

Parent.Component.html 

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

Parent.Component.ts 

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

Child.Component.html 

<div></div>

Child.Component.ts 

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