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

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