ตรวจสอบว่ามีการส่งออกในองค์ประกอบ

14

พิจารณาองค์ประกอบต่อไปนี้:

@Component({
  selector: 'app-test'
  template: 'Hello!'
}}
export class TestComponent {
  @Output() readonly selectionChange = new EventEmitter<SomeTypeHere>();
}

ด้วยการโทร:

<app-test (selectedChange)="selectedChangeHandler($event)"></app-test>

โปรดทราบว่าผมเคยเขียนแทนชื่อของการส่งออกที่ถูกต้องselectedChange selectionChangeAngular 9 ที่strictTemplatesเปิดใช้งานการตั้งค่าสถานะไม่ได้ช่วยฉันเลย มันล้มเหลวอย่างเงียบ ๆ ส่วนที่น่าสนใจคือถ้าฉันทำสิ่งเดียวกัน@Inputแอปจะจับข้อผิดพลาดและไม่คอมไพล์

มีวิธีใดที่จะทำให้เกิดข้อผิดพลาดหากฉันพยายาม "ฟัง" ที่ไม่มีข้อมูล@Output?

angular angular-directive angular9

— dev_054
แหล่งที่มา

1

มีข้อผิดพลาดใด ๆ กับ Angular รุ่นก่อนหน้าหรือไม่ ฉันคิดว่ามันไม่เคยผิดพลาดใด ๆ ในเรื่องนี้

— Aravind

@ ไม่เป็นไรมันไม่เคยผิดพลาดเลย ฉันถามว่ามันเป็นไปได้ ขอบคุณล่วงหน้า.

— dev_054

ทำไมคุณต้องการโยนข้อผิดพลาด มีความต้องการเฉพาะหรือไม่? ฉันพยายามที่จะเข้าใจคำถามของคุณ

— Aravind

@ จริงๆแล้วฉันกำลังทำงานกับแอพองค์กรที่มีนักพัฒนาจำนวนมากดังนั้นจึงเป็นเรื่องสำคัญที่จะต้องมีข้อมูล / คำเตือน / ข้อผิดพลาดบางอย่าง บางครั้งมีคนเปลี่ยน / ลบ@Output()ใน lib ที่ใช้ร่วมกันหรือแม้กระทั่งในแอปและลืมที่จะลบการโทร ... และเนื่องจากเราไม่มีข้อผิดพลาดในการรวบรวมเช่นที่เรามี@Input()เราไม่สามารถหาสิ่งที่ทำให้เกิดปัญหาบางอย่าง (หรือแม้แต่ที่ไม่เก็บขยะในรหัส) การทดสอบหน่วยเป็นประโยชน์หรือไม่ อาจเป็นไปได้ แต่ในเวลานั้นยังไม่สามารถทำได้เนื่องจากเวลา

— dev_054

3

ไม่มีข้อผิดพลาดเกิดขึ้นเนื่องจากการรวมเหตุการณ์ใน Angular ไม่เพียง แต่ใช้กับ@Outputs และEventEmitters เท่านั้น แต่ยังเพื่อฟังเหตุการณ์ DOMเช่นclick, keyupและอื่น ๆ สามารถใช้เพื่อฟังเหตุการณ์ที่กำหนดเองได้ ตัวอย่างเช่นถ้าคุณสร้างและปล่อยเหตุการณ์ที่กำหนดเองในองค์ประกอบลูก:

constructor (private el: ElementRef) {}
ngOnInit(): void {
    const domEvent = new CustomEvent('selectedChange', { custom: true });
    this.el.nativeElement.dispatchEvent(domEvent);
}

จากนั้นในองค์ประกอบหลักคุณสามารถตรวจสอบได้โดยใช้ชื่อ:

<app-test (selectedChange)="selectedChangeHandler($event)"></app-test>

Angular ใช้target.addEventListener (ชนิด, listener [, options]); ภายใน (คุณสามารถตรวจสอบได้จากลิงค์ด้านล่าง) ที่ไหนtypeอาจเป็นสตริงใดก็ได้

นั่นเป็นเหตุผลว่าทำไมจึงไม่ส่งข้อยกเว้นใด ๆ หากไม่พบการจับคู่ @Output s

listenToElementOutputs

DefaultDomRenderer2.listen

EventManager.addEventListener

DomEventsPlugin.addEventListener

— Kirill Simonov
แหล่งที่มา

เฮ้ @Kirill Simonov ขอบคุณสำหรับคำตอบของคุณ! ถ้าคุณใช้คำสั่งของคุณ: "ไม่มีข้อผิดพลาดเกิดขึ้นเนื่องจากการรวมเหตุการณ์ใน Angular ไม่เพียง แต่ใช้กับ @Outputs และ EventEmitters เท่านั้น แต่ยังรับฟังเหตุการณ์ DOM เช่นคลิก, การกดปุ่ม, ฯลฯ " ทำไมถ้าคุณผ่าน inexistent @Input()(จำไว้ว่าปัจจัยการผลิตมีลักษณะเดียวกัน: สามารถเป็นสิ่งที่ทั่วโลกเช่นdisabled, idฯลฯ ) เชิงมุมโยนข้อผิดพลาด? ทำไมมันทำงานให้@Inputแต่ไม่ได้@Output? นอกจากนี้ฉันกำลังพยายามหาวิธีที่จะเตือน / โยนข้อผิดพลาดหากไม่มีการ@Outputส่งผ่าน

— dev_054

@ dev_054 นี่เป็นเพราะชุดของคุณสมบัติถูก จำกัด โดยคุณสมบัติที่มีอยู่ขององค์ประกอบ DOM, คำสั่งหรือส่วนประกอบดังนั้น Angular สามารถตรวจสอบได้อย่างง่ายดายว่าคุณสมบัตินี้มีอยู่หรือไม่ ในทางกลับกันการaddEventListenerเชื่อมโยงจะถูกใช้(ฉันจะเพิ่มลิงก์ไปยังคำตอบของฉันเพื่อแสดง) ฉันคิดว่ามันทำโดยเจตนาเพื่อให้ผู้พัฒนาสามารถใช้การเชื่อมโยงเหตุการณ์กับกิจกรรมที่กำหนดเองได้ ฉันเชื่อว่าไม่มีวิธีที่จะปิดการใช้งานพฤติกรรมนี้ในเวลารวบรวม แม้ว่า IDE บางตัว (เช่น IntelliJ Idea) อาจเน้นสถานที่ดังกล่าวและแสดงคำเตือน

— Kirill Simonov

@ dev_054 จำไว้ว่าคุณสามารถใช้การเชื่อมโยงทางเดียวสำหรับแอตทริบิวต์ HTMLโดยใช้[attr.any-attribute]ในกรณีนี้จะไม่มีข้อผิดพลาดเกิดขึ้น

— Kirill Simonov

0

ไม่มีวิธีแก้ไขปัญหาของคุณโดยตรงอย่างไรก็ตามบางกรณีสามารถครอบคลุมได้

หากคุณมีผลใด ๆ ที่ใช้ในการ 100% ของสถานที่เช่นปุ่มเหตุการณ์แล้วคุณสามารถทำให้มันเป็นส่วนหนึ่งของการเลือกคือclick selector: 'app-test[selectionChange]'นอกจากนี้คุณสามารถทำเช่นนี้: selector: 'app-test[selectionChange]', app-test[click]'ความหมายclickหรือselectionChangeจำเป็น
หากคุณกำลัง refactoring รหัสและการส่งออกเช่นการเปลี่ยนชื่อselectionChangeไปselectedChangeแล้วคุณสามารถใช้ตัวเลือกนี้selector: 'app-test:not([selectionChange])'ให้กับผู้ใช้กำลังเพื่อการปรับปรุง

— kemsky
แหล่งที่มา

-4

หากคุณกำลังใช้รหัส VS คุณสามารถติดตั้งส่วนขยายนี้: Angular Language Serviceจะส่งคำเตือนเมื่อไม่มีการกำหนดวิธีการหรือคุณสมบัติ ส่วนขยายนี้ใช้งานได้ทั้งเอาต์พุตและอินพุต (และ attrs ฯลฯ ... )

— srgrcp
แหล่งที่มา

ตัวอย่างของคุณแสดง @Input สำหรับ@Outputบริการภาษาเชิงมุมไม่ได้ช่วยอะไรเลย แจ้งให้เราทราบหากคุณต้องการให้ฉันชี้แจงคำถาม

— dev_054

สำหรับ@Outputคุณจะเห็นข้อความแสดงข้อผิดพลาดเดียวกัน

— srgrcp