कोणीय 2 कॉलबैक

Question

के लिए @ इनपुट पर @Output का उपयोग क्यों करें, मैं कुछ वर्षों से कोणीय 1 के साथ काम करने के बाद, कोणीय 2 सीख रहा हूं। मैं Angular2 में कुछ महत्वपूर्ण अवधारणाओं को सीखने के मुख्य लक्ष्य के साथ क्रेडिट कार्ड फॉर्म घटक बना रहा हूं। घटक को सभी स्वरूपण को संभालना चाहिए, और कॉलबैक के माध्यम से एक स्ट्रिप टोकन वापस करना चाहिए। मुझे एहसास हुआ कि मैं कॉलबैक को दो तरीकों से संभाल सकता हूं।

एक @Output पैरामीटर

का उपयोग करते हुए मेरी घटक में मैं एक उत्पादन चर को परिभाषित करने और की तरह उपयोग इस उदाहरण में:

export class CreditCardForm{ 
    .... 
    @Output() callback = new EventEmitter(); 
    .... 

    doCallback(){ 
     this.callback.emit({data: 123}); 
    } 
} 

// Parent view 
<credit-card-form (callback)="creditCardCallback($event)"></credit-card-form> 

हालांकि एक @Input चर का उपयोग करना , मैं इनपुट इनपुट में कॉलबैक विधि (creditCardCallback, मूल टेम्पलेट में उपयोग किया गया) पास कर सकता हूं, जैसे:

export class CreditCardForm{ 
    .... 
    @Input() callback; 
    .... 

    doCallback(){ 
     this.callback({data: 123}); 
    } 
} 

// Parent view 
<credit-card-form [callback]="creditCardCallback"></credit-card-form> 

सवाल

मैं क्यों @Input से अधिक @Output का उपयोग करना चाहते हैं? इसके बजाय @Output चर का उपयोग करके मैं क्या हासिल करूं? जहां तक ​​मैं देख सकता हूं, यह EventEmitter कक्षा का उपयोग करके एक ओवरहेड जोड़ता है।

Answer 1

बिल्ली को त्वचा के लिए हमेशा एक से अधिक तरीके हैं। हालांकि, मेरी राय में, @Output का उपयोग कर इन लाभ हैं:

• कोड पठनीयता: यदि सिफारिश की शैली का उपयोग कर डेटा के प्रवाह को पता करने के लिए आसान है।

• डी-युग्मन: उदाहरण के लिए, सामान्य @Output घटना, अपने ParentComponent में के लिए, आप भेजा घटना से निपटने में और अधिक लचीलापन कर सकते हैं:

• इतना ही नहीं बल्कि - उस में केले सक्षम बनाता है बॉक्स वाक्य रचना: में मान लें कि आपका ChildComponent आपके पास:

@Input() creditCardValue: string; @Output() creditCardValueChange: EventEmitter<string>;

तो फिर तुम दो तरह से अपने ParentComponent आसानी से बाध्यकारी हो सकता है:

<credit-card-form [(creditCardValue)]="creditCardVal"></credit-card-form> 

Answer 2

IMHO, @Output, एक विशाल डिजाइन दोष है के रूप में आप परिणाम के लिए इसे से निपटने प्रतिक्रिया नहीं कर सकते हैं या। इस दोष का नंबर एक उदाहरण एक बटन का क्लिक है। क्लिक करने पर, जब कार्रवाई हो रही है तो बटन को 99% मामलों को अक्षम किया जाना चाहिए। एक बार कार्रवाई हो जाने के बाद, बटन को फिर से सक्षम किया जाना चाहिए। यह वह चीज है जिसे आप तत्व में ही संभालना चाहते हैं, माता-पिता में नहीं। @Output के साथ, आप यह नहीं कर सकते हैं। @Input के रूप में एक क्रिया फ़ंक्शन का उपयोग करके, आप यह कर सकते हैं! और यदि आपका एक्शन फ़ंक्शन एक अवलोकन या वादा करता है, तो आप आसानी से इसके लिए प्रतीक्षा कर सकते हैं। इस अक्षमता को संभालने वाला एक कस्टम निर्देश बनाना आसान है, और इस प्रकार आप हर जगह [क्लिक] का उपयोग कर सकते हैं और यह उस तरह से व्यवहार करेगा।

संपादित करें: मैं नहीं कहता @Output यह का उपयोग करता है है नहीं है, लेकिन कार्य आप आदि पर प्रतीक्षा करने के लिए .... नामकरण की जरूरत के लिए नहीं अपने @Input रों अच्छा, यह भी प्रवाह, onDelete आदि की तरह स्पष्ट किया ...