Cómo pasar 2 parámetros a EventEmitter angular2

92

Tengo en mi componente un EventEmitterpero no puedo compilarlo porque devuelve el error: Supplied parameters do not match any signature of call target

Mi componente:

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

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

Si elimino uno de los parámetros en this.addModel.emit()él, funciona, pero entonces: ¿Puedo pasar 2 parámetros a mi eventEmittery cómo?

Probé también con:

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

pero no funciona.

angular eventemitter LorenzoBerti
fuente

Respuestas:

181

Si observa el método de la EventEmitterAPI emit, solo puede tomar un único parámetro de tipoT

emitir (valor ?: T)

Dado que solo se permite un único parámetro, considere pasar el parámetro como en el objectmétodo de emisión. Del mismo modo, en el método makey la namevariable a continuación se mantienen sus respectivos valores.

this.addModel.emit({make: make, name: name});
//shorthand is below
this.addModel.emit({make, name});
Pankaj Parkar
fuente
2
¡Oh, está bien, gracias! será this.addModel.emit ({make: make, name: name});
LorenzoBerti
4
@echonax no es necesario hacer eso, es6 se encargará de eso, verifique aquí
Pankaj Parkar
¿Cómo puedo observar / tomar este valor en el componente principal?
roshini
@roshini, por favor, eche un vistazo a cómo ocurre la interacción de los componentes , básicamente necesita emitir datos desde el componente secundario al componente principal usando el EventEmitterobjeto ..
Pankaj Parkar
gracias por su respuesta, conozco este emisor entre componentes pero necesito interacción para pasar datos de la directiva al componente ..
roshini
41

Otra opción para escribirlo fuertemente es la siguiente:

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

luego puede emitirlo como muestra @ Pankaj-Parkar

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

Ahora tiene una escritura fuerte en lugar de usar objecto any.

Andy Danger Gagne
fuente
22

Lo arreglé haciendo

EventEmitter<object>();

Entonces pude pasar un objeto como:

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

Y funcionó.

Adham Amiin
fuente
1
Esto es genial, Adham. Nada en contra de su respuesta, pero vale la pena señalar que una práctica estándar, y una buena práctica, es proporcionar siempre un Objeto de evento junto con 1 o más valores : publish(event, value)& subscribe(e, value) {...}. Estoy un poco sorprendido de que Angular definiera su interfaz / implementara esto de la manera que lo hicieron.
Cody
1
Se votó en contra a favor de soluciones de tipos fuertes comonew EventEmitter<{name: string, age: number}>();
Liero
4

Sé que esta es una pregunta antigua para mí.Crearía una interfaz y la enviaría como un objeto donde puedo tener mi código más organizado. 

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

y llámalo de la siguiente manera 

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

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