Comment passer 2 paramètres à EventEmitter angular2

92

J'ai dans mon composant un EventEmittermais je ne peux pas le compiler car il renvoie l'erreur: Supplied parameters do not match any signature of call target

Mon composant:

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

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

Si je supprime l'un des paramètres, this.addModel.emit()cela fonctionne, mais oui: Puis-je passer 2 paramètres à mon eventEmitteret comment?

J'ai essayé aussi avec:

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

mais ça ne marche pas.

LorenzoBerti
la source

Réponses:

181

Si vous regardez la méthode de l' EventEmitterAPI emit, elle ne peut prendre qu'un seul paramètre de typeT

émettre (valeur?: T)

Étant donné qu'un seul paramètre est autorisé, envisagez de passer le paramètre comme dans la objectméthode d'émission. De même, la méthode makeet la namevariable ci-dessous conservent leurs valeurs respectives.

this.addModel.emit({make: make, name: name});
//shorthand is below
this.addModel.emit({make, name});
Pankaj Parkar
la source
2
Oh, ok, merci! ce sera this.addModel.emit ({make: make, name: name});
LorenzoBerti
4
@echonax pas besoin de faire ça, es6 s'en chargera ici
Pankaj Parkar
comment puis-je observer / prendre cette valeur dans le composant parent?
roshini
@roshini s'il vous plaît jeter un oeil à la façon dont l' interaction des composants se produit, en gros vous devez émettre des données du composant enfant au composant parent en utilisant l' EventEmitterobjet ..
Pankaj Parkar
merci pour votre réponse, je connais cet émetteur entre les composants mais j'ai besoin d'interaction pour transmettre des données de directive à composant ..
roshini
41

Une autre option pour le saisir fortement est la suivante:

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

vous pouvez ensuite l'émettre comme les spectacles @ Pankaj-Parkar

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

Vous avez maintenant une frappe forte au lieu d'utiliser objectou any.

Andy Danger Gagné
la source
22

Je l'ai réparé en faisant

EventEmitter<object>();

Ensuite, j'ai pu passer un objet tel que:

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

Et ça a marché.

Adham Amiin
la source
1
C'est super, Adham. Rien contre votre réponse, mais il convient de noter qu'une pratique standard - et une bonne pratique - consiste à toujours fournir un objet d'événement en tandem avec une ou plusieurs valeurs : publish(event, value)& subscribe(e, value) {...}. Je suis un peu surpris qu'Angular ait défini son interface / mis en œuvre comme il l'a fait.
Cody
1
Évalué à la baisse en faveur de solutions fortement types commenew EventEmitter<{name: string, age: number}>();
Liero
4

Je sais que c'est une vieille question pour moi, je créerais une interface et je l'enverrais en tant qu'objet où je pourrais avoir mon code plus organisé

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

et appelez-le comme suit

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

    this.addModel.emit(savParamters);
Khaled Dehia
la source