Angular - 在組件之間傳遞數據

Question

我有三個組成部分：

• 日期范圍選擇器圖表
• 日期范圍選擇器圖表容器
• 儀表盤

前兩個在一個文件夾中，儀表板在另一個文件夾中。

我需要將變量值從 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 function 發出，searchObj 包含我需要在其他組件上獲取的值。）

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

日期范圍選擇器圖表容器.html

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

日期范圍選擇器圖表容器.ts

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

有人能幫我嗎？ 謝謝

Answer 1

您的子組件觸發事件“搜索”（ this.search.emit(this.searchObj); ），而父組件監聽“onSearch”（ (onSearch)="onSearch2($event)" ）。

將您的父母更改為(search)="onSearch2($event)"

Answer 2

除了您綁定的事件的名稱外，一切看起來都很好。

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

父組件 ( date-range-picker-chart-container.ts ) 在子組件 ( date-range-picker-chart.ts ) 中沒有 function onSearch()的上下文。 您只需要切換事件綁定

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

父級中的 function 也可以是onSearch()而不是onSearch2() 。 function 名稱特定於它們的類（組件）並且不重疊。