如何在.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(是不正确的。关于如何使用参数Emitter的不同方法，有什么想法吗？

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

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

Answer 1

您可以简单地拥有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-侦听子事件

Answer 2

您应该用一个函数来处理parametersEmitter事件。

component.html

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

组件.ts

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

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

Answer 3

您可以使用类似的

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 4

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

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