कोणीय 2/टाइपस्क्रिप्ट: @ इनपुट/@ आउटपुट या इनपुट/आउटपुट?

Question

Udemy पर एक कोर्स करते समय हम घटक वर्ग में @Input() सजावटी का उपयोग कर घटकों को डेटा डीई पारित करने की अनुमति दे रहे हैं।

एनजीबुक -2 के माध्यम से पढ़ने के दौरान मैंने पाया है कि input संपत्ति @Component सजावट के अंदर संपत्ति का उपयोग करके एक और तरीका है।

THIS समान प्रश्न इतने पर, एक व्यक्ति ने उत्तर दिया:

आदानों का उपयोग करने का लाभ यह है कि वर्ग के उपयोगकर्ताओं को केवल इनपुट को खोजने के लिए विन्यास वस्तु @Component डेकोरेटर के लिए पारित पर देखने की जरूरत है (और आउटपुट) गुण।

और documentation राज्य के माध्यम से दिखाई देते हैं:

चाहे आप आदानों/आउटपुट या @ इनपुट का उपयोग/@ आउटपुट परिणाम एक ही तो चुनने जो एक का उपयोग करने में काफी हद तक एक शैलीगत निर्णय है।

वास्तव में, इसके बारे में सबसे उपयोगी जानकारी अधिकतर विवादित है जहां आप दिखते हैं।

अंदर @Component

@Component({ 
    selector: 'product-image', 
    inputs: ['product'], 
    template: ` 
    <img class="product-image" [src]="product.imageUrl"> 
}) 

class ProductImage { 
    product: Product; 
} 

अंदर कक्षा

@Component({ 
    selector: 'product-image', 
    template: ` 
    <img class="product-image" [src]="product.imageUrl"> 
}) 

class ProductImage { 
    @Input() product: Product; 
} 

चीजें मैं जानना चाहूंगा

• एक के और अधिक हो सकता है क्या "सर्वोत्तम अभ्यास" उपयोग?
• आप दूसरे पर एक का उपयोग कब करेंगे?
• क्या कोई अंतर है?

Answer 1

कोणीय 2 स्टाइल गाइड

आधिकारिक Angular 2 style guide के अनुसार, STYLE 05-12 कहते

उपयोग @Input और @Directive के इनपुट और आउटपुट गुण के बजाय @Output और @Component सज्जाकार

करें

लाभ यह है कि (गाइड से):

• कक्षा में कौन से गुण इनपुट या आउटपुट हैं यह पहचानना आसान और अधिक पठनीय है।
• यदि आपको कभी भी @Input या @Output से संबंधित संपत्ति या ईवेंट नाम का नाम बदलने की आवश्यकता है, तो आप इसे एक ही स्थान संशोधित कर सकते हैं।
• निर्देश से जुड़ी मेटाडेटा घोषणा कम है और इस प्रकार अधिक पठनीय है।
• उसी लाइन पर सजावटी को रखने से छोटे कोड के लिए बनाता है और अभी भी आसानी से संपत्ति को इनपुट या आउटपुट के रूप में पहचानता है।

मैंने व्यक्तिगत रूप से इस शैली का उपयोग किया है और वास्तव में DRY कोड रखने में मदद करने के लिए इसकी सराहना करते हैं।

Answer 2

अच्छी बात मुझे पता है कि आप सज्जाकार के साथ कर सकते में से एक है, लेकिन मैं अगर यह दूसरी तरह के साथ संभव है, चर aliasing है नहीं कर रहा हूँ: बाहर से

export class MyComponent { 

@Output('select') $onSelect = new EventEmitter<any>(); // this is aliased 

@Output() finish = new EventEmitter<any>(); // not aliased 

sendUp(){ 
    this.$onSelect.emit('selected'); 

    this.finish.emit('done'); 
} 
} 

और उसके बाद:

<my-component (select)="doSomething($event)"></my-component> 

---

एक दूसरे को डिफ़ॉल्ट मान सेट कर रहा है, तो आप दोनों तरीकों में डिफ़ॉल्ट मूल्य निर्धारित कर सकते हैं लेकिन सज्जाकार और अधिक सुविधाजनक और कम कोड लगते हैं।

@Component({ 
    selector:'my-component' 
}) 
export class MyComponent { 
    @Input() id = 'default-id';  

    ngOnInit(){ 

    console.log('id is : ',this.id); // will output default-id if you don't pass anything when using the component 
    } 
} 

इस मामले में

तो, अगर उपभोक्ता एक इनपुट के रूप आईडी पारित नहीं होता है, तो आप अभी भी डिफ़ॉल्ट-आईडी है;

<my-component></my-component>; 

कहाँ के रूप में, यदि आप आदानों सरणी के साथ ऐसा करना चाहता था, तुम क्या चाहते हैं:

@Component({ 
    selector:'my-component', 
    inputs:['id'] 
}) 
export class MyComponent { 
    private id = 'default-id';  

    ngOnInit(){ 

    console.log('id is : ',this.id); // will output default-id if you don't pass anything when using the component 
    } 
} 

परिणाम एक ही है, लेकिन अगर तुम नोटिस, इस मामले में आगे रहने के लिए है आईडीइनपुट दोनों सरणी और इसे कक्षा के अंदर परिभाषित करें।

संपादित करें:

जाहिर आउटपुट [] के साथ aliasing, भी संभव है bellow की तरह:

@Component({ 
    selector: 'my-component', 
    template: ` 
    <button (click)="sendUp()">Send up</button> 
    `, 
    outputs: ['$onSelect: select'] 
}) 
export class ChildComponent { 
    $onSelect = new EventEmitter<any>(); // this is aliased 

    sendUp() { 
    this.$onSelect.emit('selected'); 
    } 
} 

लेकिन फिर आप, दो स्थानों पर यह निर्धारित करने की सरणी में पर और एक कक्षा में , तो मैं अभी भी सजावट पसंद करेंगे।