जांचें कि आउटपुट घटक पर मौजूद है या नहीं

14

निम्नलिखित घटक पर विचार करें:

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

कॉल के साथ:

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

ध्यान दें कि मैंने selectedChangeसही आउटपुट नाम के बजाय लिखा है selectionChange। strictTemplatesसक्षम ध्वज के साथ कोणीय 9 ने मेरी बिल्कुल मदद नहीं की। यह चुपचाप विफल रहा। दिलचस्प बात यह है कि अगर मैं एक ही काम करता हूं @Input, तो ऐप त्रुटि पकड़ता है और संकलन नहीं करता है।

क्या कोई त्रुटि है अगर मैं एक "सुनने" का प्रयास करने के लिए कोई रास्ता नहीं है @Output?

angular angular-directive angular9

— dev_054
स्रोत

1

क्या कोणीय के पिछले संस्करणों के साथ कोई त्रुटि थी? मुझे लगता है कि इस पर कभी कोई त्रुटि नहीं हुई

— अरविंद

@ अरविंद नहीं, उसने कभी त्रुटियां नहीं कीं। मैं पूछ रहा हूं कि क्या यह संभव है। अग्रिम में धन्यवाद।

— dev_054

आप त्रुटि क्यों फेंकना चाहते हैं? क्या कोई विशिष्ट आवश्यकता है? मैं आपके प्रश्न को समझने की कोशिश कर रहा हूं

— अरविंद

@ अच्छी तरह से, मैं कई डेवलपर्स के साथ एक एंटरप्राइज़ ऐप पर काम कर रहा हूं, इसलिए किसी प्रकार की जानकारी / चेतावनी / त्रुटि होना महत्वपूर्ण है। कभी-कभी किसी व्यक्ति को @Output()साझा किए गए परिवाद में, या यहां तक कि ऐप पर भी बदल दिया जाता है या कॉल को हटाने के लिए भूल जाते हैं ... और जैसा कि हमारे पास संकलन त्रुटियां नहीं हैं, जैसे कि हमारे पास हैं @Input(), हम ठीक से पता नहीं लगा सकते हैं कि कुछ समस्याओं का कारण क्या है। (या कोड में कचरा नहीं रखने के लिए भी)। इकाई परीक्षण सहायक हो सकते हैं? हो सकता है, लेकिन समय के कारण अभी तक संभव नहीं है।

— dev_054

3

क्योंकि फेंका कोई त्रुटि नहीं है घटना बाध्यकारी कोणीय में साथ न केवल प्रयोग किया जाता है @Outputऔर EventEmitterरों, लेकिन यह भी सुनने के लिए डोम घटनाओं जैसे 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>

कोणीय टारगेट का उपयोग करता है। एडवेंटलेनस्टनर (टाइप, श्रोता [, विकल्प]); आंतरिक रूप से (आप नीचे दिए गए लिंक को देखकर यह सुनिश्चित कर सकते हैं), जहां typeकोई भी स्ट्रिंग हो सकती है।

यही कारण है कि यह किसी भी अपवाद को नहीं फेंकता है अगर यह मेल खाता नहीं है @Output।

listenToElementOutputs

DefaultDomRenderer2.listen

EventManager.addEventListener

DomEventsPlugin.addEventListener

— किरिल सिमोनोव
स्रोत

अरे @Kirill सिमोनोव आपके उत्तर के लिए धन्यवाद! खैर, आपका बयान लेते हुए: "कोई त्रुटि नहीं है क्योंकि एंगुलर में बाइंडिंग इवेंट का उपयोग न केवल @Outputs और EventEmitters के साथ किया जाता है, बल्कि DOM इवेंट जैसे कि क्लिक, की-अप आदि को सुनने के लिए भी किया जाता है", यदि आप पास करते हैं, तो क्यों? एक गैर-मौजूद @Input(): (याद रखें कि इनपुट ही विशेषताएं हैं कुछ की तरह वैश्विक हो सकता है disabled, idकोणीय फेंक दिया त्रुटियों, आदि)? यह क्यों काम करता है @Input, लेकिन इसके लिए नहीं @Output? इसके अलावा, यदि कोई असंगत @Outputपारित किया जाता है , तो मुझे चेतावनी देने / फेंकने का एक तरीका खोजने की कोशिश कर रहा हूं ।

— dev_054

@ dev_054 ऐसा इसलिए है क्योंकि गुणों का समूह एक DOM तत्व, निर्देश या घटक के मौजूदा गुणों द्वारा सीमित है, इसलिए कोणीय आसानी से जांच कर सकता है कि यह संपत्ति मौजूद है या नहीं। दूसरी ओर, ईवेंट उपयोग करने के लिए बाध्य हैं addEventListener(मैं इसे दिखाने के लिए अपने उत्तर में कुछ लिंक जोड़ूंगा)। मुझे लगता है, यह जानबूझकर किया गया था, इसलिए डेवलपर्स अपने स्वयं के कस्टम इवेंट के साथ इवेंट बाइंडिंग का उपयोग कर सकते हैं। मेरा मानना है कि संकलन के समय इस व्यवहार को अक्षम करने का कोई तरीका नहीं है। हालांकि कुछ आईडीई (जैसे इंटेलीज आइडिया) ऐसी जगहों को उजागर कर सकते हैं और चेतावनी दे सकते हैं।

— किरिल सिमोनोव

@ dev_054 याद रखें कि आप HTML विशेषताओं के उपयोग के लिए एक तरफ़ा बाइंडिंग का भी उपयोग कर सकते हैं [attr.any-attribute], इस स्थिति में कोई भी त्रुटि नहीं होगी।

— किरिल सिमोनोव

0

आपकी समस्या का कोई सीधा समाधान नहीं है, हालांकि कुछ मामलों को कवर किया जा सकता है।

यदि आपके पास कोई आउटपुट है जो 100% स्थानों पर उपयोग किया जाता है जैसे कि बटन clickइवेंट तो आप इसे चयनकर्ता का हिस्सा बना सकते हैं selector: 'app-test[selectionChange]'। इसके अलावा आप उदाहरण के लिए ऐसा कर सकते हैं: selector: 'app-test[selectionChange]', app-test[click]'अर्थ clickया selectionChangeआवश्यकता है।
आप कोड और नाम बदलने उत्पादन यानी पुनर्रचना रहे हैं selectionChangeकरने के लिए selectedChange: तो आप इस का भी उपयोग करेंगे selector: 'app-test:not([selectionChange])'अद्यतन करने के लिए बल उपयोगकर्ताओं के लिए।

— kemsky
स्रोत

-4

यदि आप VS कोड का उपयोग कर रहे हैं, तो आप इस एक्सटेंशन को इंस्टॉल कर सकते हैं: कोणीय भाषा सेवा एक पद्धति या संपत्ति परिभाषित नहीं होने पर चेतावनी फेंक देगी। यह एक्सटेंशन आउटपुट और इनपुट (और अटार्स, आदि ...) दोनों के साथ काम करता है।

— srgrcp
स्रोत

आपका नमूना @Input दिखाता है। के लिए @Output, कोणीय भाषा सेवा कुछ नहीं में मदद नहीं करता है। यदि आपको प्रश्न स्पष्ट करने की आवश्यकता है तो मुझे बताएं।

— dev_054

@Outputआप के लिए एक ही त्रुटि संदेश देखेंगे।

— srgrcp