Mam dwie metody, które emitują pewne parametry.

@Output() parametersEmitter = new EventEmitter<FilterParams>();

emitSearch() {
  const parameters = <any>{};
  this.parametersEmitter.emit(parameters);
}

emitExport() {
  const parameters = <any>{};
  this.parametersEmitter.emit(parameters);
}

Następnie chcę wyemitować te parametry do metod Rest API. To jest to, co chcę zrobić, ale dwukrotne użycie wartości (parametersEmitter) nie jest poprawne. Masz jakiś pomysł, jak mogę używać różnych metod z parametremEmitter?

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

searchMessages() i exportMessages() to metody, które wysyłają parametry do zaplecza

0
dernor00 31 marzec 2020, 10:59

4 odpowiedzi

Najlepsza odpowiedź

Możesz po prostu mieć 2 emitery zdarzeń.

Komponent podrzędny

@Output()
search = new EventEmitter()
@Output()
export = new EventEmitter()

Komponent nadrzędny

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

Możesz mieć tyle EventEmitters, ile chcesz. Więcej informacji znajdziesz w dokumentacji:

https://angular.io/guide/component-interaction#parent-listens-for-child-event

3
Ben Winding 31 marzec 2020, 08:08

Zdarzenia parametersEmitter należy obsługiwać za pomocą jednej funkcji.

Component.html

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

Component.ts

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

Jeśli potrzebujesz bardziej złożonej logiki, za jej zorganizowanie może odpowiadać pojedyncza funkcja.

2
Kurt Hamilton 31 marzec 2020, 08:03

Istnieje wiele sposobów, aby spełnić Twoje wymagania. Jednym ze sposobów jest utworzenie wielu emiterów zdarzeń. Z drugiej strony możesz przypisać dowolną liczbę wywołań zwrotnych do modułu obsługi zdarzeń. Spróbuj wykonać następujące czynności

<app-search (parametersEmitter)="searchMessages($event); exportMessages($event)"></app-search>
1
Michael D 31 marzec 2020, 08:11

Możesz używać w ten sposób

emitSearch() {
    const data = {
    isSearch:true;
    };
    this.parametersEmitter.emit(parameters);
  }

 emitExport() {
    const data = {
    isExport:true;
    };
    this.parametersEmitter.emit(parameters);
  }

I Twoja strona HTML

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

Składnik

perofrmOperation(data) {
if(data.isSearch){
// Call search API
}
if(data.isExport){
// Call export API
}
}
1
Rushi Patel 31 marzec 2020, 08:04