EventEmitter angular2에 2 개의 매개 변수를 전달하는 방법


92

내 구성 요소에 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>();

하지만 작동하지 않습니다.

답변:


181

EventEmitterAPI의 emit메소드 를 보면 유형의 단일 매개 변수 만 사용할 수 있습니다.T

emit (값? : T)

단일 매개 변수 만 허용되므로 objectemit 메소드 에서 와 같이 매개 변수 전달을 고려하십시오 . 마찬가지로 아래 방법 makename변수는 해당 값을 보유하고 있습니다.

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

2
오, 그래요, 감사합니다! this.addModel.emit ({make : make, name : name});
LorenzoBerti

4
그것의 @echonax 그렇게 할 필요가 ES6주의를 기울여야하지 않습니다 여기에 체크
판 카즈 Parkar에게

부모 구성 요소에서이 값을 어떻게 관찰 / 취득 할 수 있습니까?
roshini

@roshini 구성 요소 상호 작용이 어떻게 발생 하는지 살펴보십시오 . 기본적으로 EventEmitter개체를 사용하여 자식 구성 요소에서 부모 구성 요소로 데이터를 내 보내야 합니다.
Pankaj Parkar

귀하의 응답에 감사드립니다. 구성 요소
간이

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.


22

나는 그것을 만들어서 고쳤다.

EventEmitter<object>();

그런 다음 다음과 같은 객체를 전달할 수있었습니다.

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

그리고 그것은 효과가있었습니다.


1
대단해, 애드 햄. 귀하의 답변에 반하는 것은 없지만 표준 관행 및 좋은 관행은 항상 하나 이상의 값과 함께 이벤트 객체를 제공하는 것입니다 : publish(event, value)& subscribe(e, value) {...}. Angular가 인터페이스를 정의하고 구현 한 방식에 약간 놀랐습니다.
Cody

1
찬성을 downvoted 강하게 유형의 솔루션은 좋아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);
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.