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

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