So übergeben Sie 2 Parameter an EventEmitter angle2

87

Ich habe in meiner Komponente ein EventEmitter, kann es aber nicht kompilieren, da es den Fehler zurückgibt: Supplied parameters do not match any signature of call target

Meine Komponente:

@Output() addModel = new EventEmitter<any>();

saveModel($event, make, name) {
    this.addModel.emit(make, name);
}

Wenn ich einen der darin enthaltenen Parameter lösche this.addModel.emit(), funktioniert das aber: Kann ich 2 Parameter an meine übergeben eventEmitterund wie?

Ich habe es auch versucht mit:

@Output() addModel = new EventEmitter<any,any>();

aber es funktioniert nicht.

angular eventemitter LorenzoBerti
quelle

Antworten:

175

Wenn Sie sich die EventEmitterAPI- emitMethode ansehen , kann sie nur einen einzigen Parameter vom Typ annehmenT

emittieren (Wert?: T)

Da nur einzelne Parameter zulässig sind, sollten Sie die Übergabe von Parametern wie objectin der Emit-Methode in Betracht ziehen . Ebenso halten Methode make& nameVariable unten ihre jeweiligen Werte.

this.addModel.emit({make: make, name: name});
//shorthand is below
this.addModel.emit({make, name});
Pankaj Parkar
quelle
2
Oh okay danke! es wird this.addModel.emit ({make: make, name: name});
LorenzoBerti
4
@echonax keine Notwendigkeit , dies zu tun, wird es6 kümmern sich um sie hier überprüfen
Pankaj Parkar
Wie kann ich diesen Wert in der übergeordneten Komponente beobachten / nehmen?
Roshini
@roshini bitte werfen Sie einen Blick darauf, wie Komponenteninteraktion geschieht, im Grunde müssen Sie Daten von der EventEmitter
untergeordneten
Vielen
38

Eine andere Möglichkeit, es stark zu tippen, ist wie folgt:

@Output addModel = new EventEmitter<{make: string, name: string}>();

Sie können es dann wie @ Pankaj-Parkar-Shows ausgeben

this.addModel.emit({make, name});
oder
this.addModel.emit({make: 'honda', name: 'civic'});

Sie haben jetzt eine starke Eingabe, anstatt objectoder zu verwenden any.

Andy Danger Gagne
quelle
22

Ich habe es behoben, indem ich gemacht habe

EventEmitter<object>();

Dann konnte ich ein Objekt übergeben wie:

this.MyOutputVariable.emit({ name: 'jack', age: '12' });

Und es hat funktioniert.

Adham Amiin
quelle
1
Das ist großartig, Adham. Nichts gegen Ihre Antwort, aber es ist erwähnenswert, dass eine Standardpraxis - und eine gute Praxis - darin besteht, ein Ereignisobjekt immer zusammen mit einem oder mehreren Werten bereitzustellen : publish(event, value)& subscribe(e, value) {...}. Ich bin ein wenig überrascht, dass Angular ihre Schnittstelle so definiert / implementiert hat, wie sie es getan haben.
Cody
1
Abgestimmt zugunsten stark typisierter Lösungen wienew EventEmitter<{name: string, age: number}>();
Liero
4

Ich weiß, dass dies eine alte Frage für mich ist. Ich würde eine Schnittstelle erstellen und sie als Objekt senden, in dem ich meinen Code besser organisieren kann 

 export interface addModelArgs{
      make:string,
      name:string
    }
@Output() addModel = new EventEmitter<addModelArgs>();

und nenne es wie folgt 

    this.addModel.emit({make: 'honda', name: 'civic'});
or 
    let savParamters:addModelArgs={make: 'honda', name: 'civic'};

    this.addModel.emit(savParamters);
khaled Dehia
quelle