Angular - передача данных между компонентами - PullRequest
Новая
       93

Angular - передача данных между компонентами

0 голосов
/ 04 августа 2020

У меня есть три компонента:

  • Date-range-picker-chart
  • Date-range-picker-chart-container
  • Dashboard

Первые два находятся в папке, панель инструментов - в другой.

Мне нужно переместить значение переменной из Date-range-picker-chart в Date-range-picker-chart-container. Я пробовал использовать EventEmitter, но это не go.

панель инструментов. html

<div class="col-12 pageTop">
  {{ "menu.dashboard" | translate }}
</div>
<date-range-picker-chart-container
  [searchParamsState]="(searchStatusService.state$ | async).searchParams"
  [searchStatusService]="searchStatusService"
></date-range-picker-chart-container>
<br />
<div class="animated fadeIn">
  <!-- <error-dash-table-container
    [searchParamsState]="(searchStatusService.state$ | async).searchParams"
    [searchStatusService]="searchStatusService"
  ></error-dash-table-container> -->
  <error-chart-container
    [searchParamsState]="(searchStatusService.state$ | async).searchParams"
    [searchStatusService]="searchStatusService"
  ></error-chart-container>
  <error-dash-container></error-dash-container>
</div>

Date-range-picker-chart. ts (Когда я нажимаю кнопку поиска, она вызывает функцию onSearch, которая излучает, searchObj содержит значения, которые мне нужны для других компонентов.) 

@Output() search: EventEmitter<any> = new EventEmitter<any>();
onSearch() {
    this.search.emit(this.searchObj);
  }

Date-range-picker- chart-container. html

<date-range-picker-chart
  (onSearch)="onSearch2($event)"
></date-range-picker-chart>

Date-range-picker-chart-container.ts 

ngOnInit() {}
onSearch2(value) {
    console.log(value); // this doesn't display nothing.
  }

Кто-нибудь может мне помочь? Спасибо

Ответы [ 2 ]

1 голос
/ 04 августа 2020

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

@Output() search: EventEmitter<any> = new EventEmitter<any>();
          ------
            ^
            |__ Name of the event

Родительский компонент ( date-range-picker-chart-container.ts ) не имеет контекста функции onSearch() в дочернем компоненте ( date-range-picker-chart.ts ). Вам просто нужно переключить привязку событий 

<date-range-picker-chart (search)="onSearch2($event)">
</date-range-picker-chart>

Также функция в родительском элементе может быть onSearch() вместо onSearch2(). Имена функций указаны c для их классов (компонентов) и не перекрываются.

1 голос
/ 04 августа 2020

Ваш подкомпонент запускает событие «поиск» (this.search.emit(this.searchObj);), тогда как родительский элемент слушает «onSearch» ((onSearch)="onSearch2($event)").

Измените своего родителя на (search)="onSearch2($event)"

...