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