วิธีส่งพารามิเตอร์ 2 ตัวไปยัง EventEmitter angular2


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>();

แต่มันไม่ได้ผล

คำตอบ:


182

หากคุณดูวิธีการEventEmitterของ API emitสามารถใช้พารามิเตอร์ประเภทเดียวเท่านั้นT

เปล่ง (ค่า?: T)

เนื่องจากอนุญาตให้ใช้พารามิเตอร์เดียวเท่านั้นให้พิจารณาการส่งผ่านพารามิเตอร์เช่นเดียวกับในobjectวิธีการปล่อย ในทำนองเดียวกันในวิธีการด้านล่างmake& nameตัวแปรถือค่าตามลำดับ

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 จะดูแลให้ตรวจสอบที่นี่
Pankaj Parkar

ฉันจะสังเกต / รับค่านี้ในองค์ประกอบหลักได้อย่างไร
roshini

@roshini โปรดดูว่าการโต้ตอบของคอมโพเนนต์เกิดขึ้นได้อย่างไรโดยพื้นฐานแล้วคุณต้องส่งข้อมูลจากองค์ประกอบลูกไปยังองค์ประกอบหลักโดยใช้EventEmitterวัตถุ ..
Pankaj Parkar

ขอบคุณสำหรับคำตอบของคุณฉันรู้ว่าอีซีแอลนี้ระหว่างส่วนประกอบ แต่การทำงานร่วมกันเป็นความจำเป็นในการส่งผ่านข้อมูลจากคำสั่งไปยังส่วน ..
โรจินี่

42

อีกทางเลือกหนึ่งในการพิมพ์อย่างจริงจังมีดังนี้:

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

จากนั้นคุณสามารถปล่อยมันออกมาเช่นการแสดงของ @ Pankaj-Parkar

this.addModel.emit({make, name});
หรือ
this.addModel.emit({make: 'honda', name: 'civic'});

ขณะนี้คุณมีพิมพ์ strong แทนการใช้หรือobjectany


22

ฉันแก้ไขโดยการทำ

EventEmitter<object>();

จากนั้นฉันก็สามารถส่งผ่านวัตถุเช่น:

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

และมันได้ผล


1
นี่ยอดเยี่ยมมาก Adham ไม่มีอะไรกับคำตอบของคุณ แต่ก็เป็นที่น่าสังเกตว่ามาตรฐานการปฏิบัติ - และการปฏิบัติที่ดี - คือการเสมอจัดหาวัตถุที่จัดกิจกรรมควบคู่กับ 1 หรือมากกว่าค่า : &publish(event, value) subscribe(e, value) {...}ฉันแปลกใจเล็กน้อยที่ Angular กำหนดอินเทอร์เฟซ / ใช้งานแบบนี้
Cody

2
โหวตให้ความเห็นชอบโซลูชันประเภทรุนแรงเช่น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.