0

我有两种方法可以发出一些参数。

@Output() parametersEmitter = new EventEmitter<FilterParams>();

emitSearch() {
  const parameters = <any>{};
  this.parametersEmitter.emit(parameters);
}

emitExport() {
  const parameters = <any>{};
  this.parametersEmitter.emit(parameters);
}

然后我想将这些参数发送到 Rest API 方法。这就是我想要做的，但是使用两次(parametersEmitter)是不正确的。知道如何对 parameterEmitter 使用不同的方法吗？

<div>
  <app-search (parametersEmitter)="searchMessages($event)" (parametersEmitter)="exportMessages($event)"></app-search>
</div>

searchMessages()并且exportMessages()是将参数发送到后端的方法

4

4 回答 4

3

您可以简单地拥有 2 个事件发射器。

子组件

@Output()
search = new EventEmitter()
@Output()
export = new EventEmitter()

父组件

<div>
  <app-search 
    (search)="searchMessages($event)" 
    (export)="exportMessages($event)"
  ></app-search>
</div>

实际上，您可以拥有任意数量EventEmitters，有关更多详细信息，请参阅文档：

https://angular.io/guide/component-interaction#parent-listens-for-child-event

于 2020-03-31T08:08:35.730 回答
2

您应该parametersEmitter使用单个函数处理事件。

组件.html

<div>
  <app-search (parametersEmitter)="onParametersEmitted($event)"></app-search>
</div>

组件.ts

onParametersEmitted(parameters) {
  this.searchMessages(parameters);
  this.exportMessages(parameters);
}

如果您需要任何更复杂的逻辑，您的单个函数可以负责编排它。

于 2020-03-31T08:03:47.303 回答
1

你可以这样使用

emitSearch() {
    const data = {
    isSearch:true;
    };
    this.parametersEmitter.emit(parameters);
  }

 emitExport() {
    const data = {
    isExport:true;
    };
    this.parametersEmitter.emit(parameters);
  }

还有你的 html 方面

<app-search (parametersEmitter)="perofrmOperation($event)"></app-search>

零件

perofrmOperation(data) {
if(data.isSearch){
// Call search API
}
if(data.isExport){
// Call export API
}
}
于 2020-03-31T08:04:39.187 回答
1

有多种方法可以满足您的要求。一种方法是创建多个事件发射器。另一方面，您可以为事件处理程序分配任意数量的回调。尝试以下

<app-search (parametersEmitter)="searchMessages($event); exportMessages($event)"></app-search>
于 2020-03-31T08:11:12.893 回答