Как сделать межстороннюю связь между компонентами и наблюдаемыми? - PullRequest
Новая
       36

Как сделать межстороннюю связь между компонентами и наблюдаемыми?

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

Oke,

У меня есть два компонента, которые должны общаться друг с другом. И у меня есть сервис с сервисом API.

Сервис выглядит следующим образом: 

export class ExtendedSearchService {


  private particiPantINfos : ParticipantInfoDTO[] = [];


 private  filterparticipantByRegistration$ = new Subject<ParticipantInfoDTO[]>();


  selectedSearch: string; 
  selectedValueStatus: string;
  selectedValueOptie: string;
  selectedQrcode: string;
  selectedValueProgressie: string;
  showDropdownChallenge = false;
  showDropdownVcheqCode = false;


  constructor(
    private participantService: ParticipantService,
  ) {}

  getParticipantInfoUpdates(){
  return  this.filterparticipantByRegistration$.asObservable();
  }

  filerByRegistration(selectedValue: any, startDate: Date)  {
    console.log('registration filter2 ');
    this.participantService
      .filterParticipantsByRegistration(1, selectedValue as any, moment(startDate).format('YYYY MM D'))
      .subscribe(filterByRegistration => {
        console.log('Filter by registration items:', filterByRegistration);
        console.log('StartDate registration: ', startDate);

      });
  }

}

И компонент расширенного поиска, который запускает вызов сервиса, выглядит так: 

searchFor() {
    if (this.selectedSearch === 'Registratie') {
      this.extendedSearchService.filerByRegistration(this.selectedValue, this.startDate);
    }

и затем у меня есть компонент списка, в котором должны быть показаны результаты:

, так что это метод: 

applyExtendedFilter(filteredParticipants: ParticipantInfoDTO[]) {
    this.datasource.data = filteredParticipants;
    this.extendedSearchFilterService.getParticipantInfoUpdates().subscribe(participantInfo => {
      this.participantInfo = participantInfo;
    });
    console.log('klicked', this.datasource.data);

  }

и шаблон выглядит так: 

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

Но я вижу результаты в консоли: 

  console.log('Filter by registration items:', filterByRegistration);

Но результаты не отображаются в представлении (в компоненте списка)

Так что мне нужноизменить?

Спасибо

Итак, проблема в том, как вызвать метод: 

applyExtendedFilter

Поскольку эта строка: 

console.log('klicked', this.datasource.data);

не имеетбыл запущен

Это компонент списка: 

export class ListComponent implements OnInit {
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  datasource: MatTableDataSource<ParticipantInfoDTO>;

  participantInfo: ParticipantInfoDTO[] = [];

  public readonly displayedColumns = [
    'fullName',
    'dateOfBirth',
    'email',
    'projects',
    'view'
  ];

  public searchExpanded = false;

  constructor(
    route: ActivatedRoute,
    private participantServer: ParticipantService,
    private extendedSearchFilterService: ExtendedSearchService
  ) {
    const allParticipants: any[] = route.snapshot.data['participants'];
    this.datasource = new MatTableDataSource(allParticipants);
   // this.extendedSearchFilterService.filterparticipantByRegistration;
  }

  ngOnInit() {
    this.datasource.paginator = this.paginator;
    this.datasource.sort = this.sort;
    this.datasource.sortingDataAccessor = (data, sortHeaderId) => {
      switch (sortHeaderId) {
        case 'dateOfBirth':
          return new Date(data['dateOfBirth']);
        default:
          return data[sortHeaderId];
      }
    };
    this.extendedSearchFilterService.getParticipantInfoUpdates().subscribe();


  }

  applyFilter(filter: string) {
    this.datasource.filter = filter;
    console.log(this.datasource);
  }

  eventStream$;

  applyExtendedFilter(filteredParticipants: ParticipantInfoDTO[]) {
    console.log('klicked', this.datasource.data);
    this.datasource.data = filteredParticipants;

    this.eventStream$ = this.extendedSearchFilterService.getParticipantInfoUpdates$;
    /* this.extendedSearchFilterService.getParticipantInfoUpdates().subscribe(participantInfo => {
      this.participantInfo = participantInfo;
    }); */

  }
}

Итак, я использовал EventEmitter. Но потому что я заменил вызовы API для Сервиса. EventEmitter должен быть заменен на Observable. Но проблема в том, что ListComponent не обновляется.

Шаблон списка компонентов выглядит следующим образом: 

   <app-extended-search [@searchOpen]
        (clickCloseSearch)="handleClickCloseSearch()"
        [searchExtended]="searchExpanded"

        (extendedSearchFilter.filterparticipantByRegistration$) = "applyExtendedFilter()"

        class="extended-search"
        [ngClass]="{expanded: searchExpanded}"
      ></app-extended-search>

И это важно: 


    (extendedSearchFilter.filterparticipantByRegistration$) = "applyExtendedFilter()"

Я знаю, что это неправильно. Но как это заменить?

Таким образом, расширенный компонент отправляет данные, а компоненты List получают данные от расширенного компонента.

...