Como passar 2 parâmetros para EventEmitter em Angular?

98

Eu tenho um em meu componente, EventEmittermas não consigo compilá-lo porque ele gera o erro:

Os parâmetros fornecidos não correspondem a nenhuma assinatura do alvo da chamada

Meu componente:

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

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

Se eu excluir um dos parâmetros this.addModel.emit()funciona, mas é possível passar 2 parâmetros para EventEmittere como?

angular eventemitter LorenzoBerti
fonte

Respostas:

190

Se você olhar para o método de emissão EventEmitter @ angular.io , ele só pode receber um único parâmetro do tipoT

emitir (valor ?: T)

Uma vez que apenas um único parâmetro é permitido, considere passando-o como um objectno emitmétodo.

No snippet abaixo, make& as namevariáveis ​​estão mantendo seus respectivos valores:

this.addModel.emit({make: make, name: name});
//shorthand is below
this.addModel.emit({make, name});
Pankaj Parkar
fonte
2
Oh, ok, obrigado! será this.addModel.emit ({make: make, name: name});
LorenzoBerti
4
@echonax não precisa fazer isso, es6 vai cuidar disso verifique aqui
Pankaj Parkar
como posso observar / pegar esse valor no componente pai?
roshini
@roshini, por favor, dê uma olhada em como a interação do componente acontece, basicamente você precisa emitir dados do componente filho para o componente pai usando o EventEmitterobjeto ..
Pankaj Parkar
obrigado pela sua resposta, eu conheço esse emissor entre os componentes, mas preciso de interação para passar dados da diretiva para o componente.
roshini
44

Outra opção para digitar fortemente é a seguinte:

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

você pode então emiti-lo como mostra @Pankaj-Parkar

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

Agora você tem uma digitação forte em vez de usar objectou any.

Andy Danger Gagne
fonte
23

Eu consertei fazendo

EventEmitter<object>();

Então, consegui passar um objeto como:

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

E funcionou.

Adham Amiin
fonte
1
Isso é ótimo, Adham. Nada contra sua resposta, mas é importante notar que uma prática padrão - e uma boa prática - é sempre fornecer um Objeto de evento em conjunto com 1 ou mais valores : publish(event, value)& subscribe(e, value) {...}. Estou um pouco surpreso que o Angular definiu sua interface / implementou isso da maneira que fizeram.
Cody
2
Votos negados a favor de soluções de tipos fortes comonew EventEmitter<{name: string, age: number}>();
Liero
5

Eu sei que esta é uma pergunta antiga para mim, eu criaria uma interface e a enviaria como um objeto onde posso ter meu código mais organizado 

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

e chamá-lo da seguinte forma 

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

    this.addModel.emit(savParamters);
Khaled Dehia
fonte