Jak przekazać 2 parametry do EventEmitter angular2

92

Mam w swoim komponencie, EventEmitterale nie mogę go skompilować, ponieważ zwraca błąd: Supplied parameters do not match any signature of call target

Mój komponent:

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

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

Jeśli usunę jeden z parametrów, this.addModel.emit()to działa, ale tak: Czy mogę przekazać 2 parametry do mojego eventEmitteri jak?

Próbowałem też z:

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

ale to nie działa.

angular eventemitter LorenzoBerti
źródło

Odpowiedzi:

181

Jeśli spojrzysz na metodę EventEmitterAPI emit, może ona przyjąć tylko jeden parametr typuT

emitować (wartość ?: T)

Ponieważ dozwolony jest tylko jeden parametr, rozważ przekazanie parametru tak, jak w objectmetodzie emit. Podobnie w poniższej metodzie makei namezmiennej zachowują odpowiednie wartości.

this.addModel.emit({make: make, name: name});
//shorthand is below
this.addModel.emit({make, name});
Pankaj Parkar
źródło
2
Och, ok, dziękuję! będzie this.addModel.emit ({marka: marka, nazwa: nazwa});
LorenzoBerti
4
@echonax nie musisz tego robić, es6 się tym zajmie. sprawdź tutaj
Pankaj Parkar
jak mogę obserwować / przyjąć tę wartość w komponencie nadrzędnym?
roshini
@roshini Proszę przyjrzeć się, jak zachodzi interakcja między komponentami , po prostu musisz emitować dane z komponentu podrzędnego do komponentu nadrzędnego za pomocą EventEmitterobiektu ..
Pankaj Parkar
dziękuję za odpowiedź, znam ten emiter między komponentami, ale potrzebuję interakcji jako przekazywania danych z dyrektywy do komponentu ..
roshini
41

Inna opcja silnego wpisania jest następująca:

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

możesz go następnie emitować jak pokazy @ Pankaj-Parkar

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

Masz teraz mocne wpisywanie zamiast używania objectlub any.

Andy Danger Gagne
źródło
22

Naprawiłem to, robiąc

EventEmitter<object>();

Wtedy udało mi się przekazać obiekt taki jak:

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

I zadziałało.

Adham Amiin
źródło
1
To świetnie, Adham. Nie ma nic przeciwko twojej odpowiedzi, ale warto zauważyć, że standardową praktyką - i dobrą praktyką - jest zawsze dostarczanie obiektu zdarzenia w tandemie z 1 lub więcej wartościami : publish(event, value)& subscribe(e, value) {...}. Jestem trochę zaskoczony, że Angular zdefiniował ich interfejs / zaimplementował w ten sposób.
Cody
1
Głos w dół na rzecz silnie typów rozwiązań, takich jaknew EventEmitter<{name: string, age: number}>();
Liero
4

Wiem, że to dla mnie stare pytanie Utworzyłbym interfejs i wysłał go jako obiekt, w którym mógłbym lepiej zorganizować swój kod 

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

i nazwij to następująco 

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

    this.addModel.emit(savParamters);
khaled Dehia
źródło