Как создать более одного метода в файле. 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() - это методы, которые отправляют параметры в Backend

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 -listens-for-child-event

Answer 2

Есть несколько способов удовлетворить ваши требования. Одним из способов является создание нескольких источников событий. С другой стороны, вы можете назначить любое количество обратных вызовов обработчику событий. Попробуйте следующее

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

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

Вы должны обрабатывать parametersEmitter события одной функцией.

component. html

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

component.ts

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

Если вам требуется В любой более сложной логике c ваша отдельная функция может быть ответственна за ее организацию.