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

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

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

tuxiangzhen 回答:如何在.html文件中发出多个方法

您可以简单地拥有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

,

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

component.html

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

component.ts

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

如果您需要任何更复杂的逻辑,则可以由单个函数来进行编排。

,

您可以那样使用

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

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

<app-search (parametersEmitter)="searchMessages($event); exportMessages($event)"></app-search>
本文链接:https://www.f2er.com/2545540.html

大家都在问