如何将2个参数传递给EventEmitter angular2

91

我在我的组件中有一个，EventEmitter但是我不能编译它，因为它返回错误： Supplied parameters do not match any signature of call target

我的组件：

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

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

如果删除其中的一个参数this.addModel.emit()可以正常工作，但是可以：我可以将2个参数传递给我eventEmitter吗？如何传递？

我也尝试过：

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

但这不起作用。

angular eventemitter

— 洛伦佐·贝蒂
source

180

如果您查看EventEmitterAPI的emit方法，则只能采用类型为单个的参数T

发射（值？：T）

由于只允许使用单个参数，因此请考虑像object发出方法中那样传递参数。同样在下面的方法make和name变量保持各自的值。

this.addModel.emit({make: make, name: name});
//shorthand is below
this.addModel.emit({make, name});

— Pankaj Parkar
source

2

哦，好的，谢谢！它将this.addModel.emit（{make：make，name：name}）;

— LorenzoBerti

4

@echonax不需要这样做，es6将在此处

— Pankaj Parkar，2016年

如何在父组件中观察/采用此值？

— roshini

@roshini请看看如何组件交互情况，基本上你需要使用从子组件的数据发射到父组件EventEmitter对象..

— 潘卡Parkar

感谢您的回应，我知道组件之间的发射器，但需要交互，因为需要将数据从指令传递到组件

— 。.– roshini

41

强类型输入的另一个选项如下：

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

然后您可以像@ Pankaj-Parkar的节目一样发出它

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

现在，您可以使用强类型而不是使用object或any。

— 安迪·丹格·加涅
source

22

我通过使它固定

EventEmitter<object>();

然后，我能够传递一个对象，例如：

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

而且有效。

— 阿达姆·阿米因（Adham Amiin）
source

1

太好了，阿达姆。没有什么不符合您的答案的，但是值得注意的是，一种标准做法（也是一种很好的做法）是始终提供具有1个或多个值的事件对象：publish(event, value)＆subscribe(e, value) {...}。我对Angular定义了他们的界面/以这种方式实现感到有些惊讶。

— 科迪

1

不赞成使用强类型解决方案，例如new EventEmitter<{name: string, age: number}>();

— Liero

4

我知道这对我来说是一个古老的问题，我将创建一个接口并将其作为对象发送，在这里我可以使我的代码更有条理

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

并如下称呼它

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

    this.addModel.emit(savParamters);

— 哈立德·迪亚
source