如何在 .html 文件中发出多个方法

Question

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

@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()是将参数发送到后端的方法

Answer 1

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

component.html

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

component.ts

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

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

Answer 2

你可以这样使用

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
}
}

Answer 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

Answer 4

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

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

如何在 .html 文件中发出多个方法

How to emit more than one method in a .html file

typescript

angular

angular-event-emitter