Angular

Question

我有三个组成部分：

日期范围选择器图表
日期范围选择器图表容器
仪表板

前两个在一个文件夹中，dashboard 在另一个文件夹中。

我需要将变量值从 Date-range-picker-chart 移动到 Date-range-picker-chart-container。我试过使用 EventEmitter，但没有成功。

dashboard.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);
  }

日期范围选择器图表-container.html

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

日期范围选择器图表-container.ts

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

有人可以帮助我吗？谢谢

Answer 1

您的 sub-component 触发事件“搜索”(this.search.emit(this.searchObj);)，而 parent 监听“onSearch”((onSearch)="onSearch2($event)")。

将您的 parent 更改为 (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).你只需要切换事件绑定

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

父级中的函数也可以是 onSearch() 而不是 onSearch2()。函数名称特定于它们的类（组件）并且不重叠。

Angular - 在组件之间传递数据

Angular - passing data between components

data-binding

eventemitter

typescript