बिडरेक्शनल डेटा एक घटक इनपुट प्रॉपर्टी पर बाध्यकारी

Question

मैं कोणीय 2 पर कुछ काम करने की कोशिश कर रहा हूं और मैं इस व्यवहार के बारे में कुछ नहीं ढूंढ पा रहा हूं।

import {Component,Input} from 'angular2/core' 
    @Component({ 
     selector:'my-comp', 
     template:`<input type="text" style="text-align:center; [(ngModel)]="inputText"> <p>{{inputText}}</p>` 
    }) 

    export class MyComp{ 
     @Input() inputText : string; 
    } 

और मैं इस तरह मेरी घटक से मेरी inputText चर पर एक द्विदिश डेटा बाइंडिंग करने के लिए कोशिश कर रहा हूँ:

<my-comp [(inputText)]="testString"></my-comp> 

मैं एक आवेदन है कि यह एक तरह एक कस्टम घटक को लागू करता है जहां testStringMyApp.ts में परिभाषित एक चर है जिसमें एक स्ट्रिंग है। मैं चाहता हूं कि testString वैरिएबल को संशोधित किया जाए जब मेरा inputText उपयोगकर्ता द्वारा संशोधित किया गया हो। https://plnkr.co/edit/zQiCQ3hxSSjCmhWJMJph?p=preview

इस बस काम करता है बनाने के लिए एक रास्ता है:

यहाँ एक सरल नमूना कोड के साथ एक Plunker है? क्या मुझे ngModel की तरह काम करने के लिए अपने कस्टम घटकों और अधिभार कार्यों पर एक कोणीय 2 वर्ग लागू करना है? मैं जरूरी इस तरह EventEmitter प्रकार है कि अपने डेटा फेंकना जब यह परिवर्तनों की inputTextChanged चर बना सकते हैं और कुछ करने के लिए है:

<my-comp [inputText]="testString" (inputTextChanged)="testString = $event;"></my-comp> 

अग्रिम धन्यवाद।

Answer 1

यह खाका सिंटेक्स दस्तावेज़ में समझाया गया है Two-Way Binding with NgModel खंड में:

<input [(ngModel)]="currentHero.firstName">

आंतरिक रूप से, कोणीय अवधि, ngModel नक्शे, एक ngModel इनपुट संपत्ति और एक ngModelChange उत्पादन संपत्ति के लिए। यह एक सामान्य सामान्य पैटर्न का एक विशिष्ट उदाहरण है जिसमें यह [(x)] से x संपत्ति बाध्यकारी के लिए इनपुट प्रॉपर्टी और xChange इवेंट बाइंडिंग के लिए आउटपुट प्रॉपर्टी से मेल खाता है।

हम अपने स्वयं के दो-तरफा बाध्यकारी निर्देश/घटक लिख सकते हैं जो इस पैटर्न का पालन करते हैं यदि हम कभी ऐसा करने के मूड में हैं।

भी ध्यान रखें कि [(x)] और एक संपत्ति बंधन के लिए बस वाक्यात्मक चीनी एक घटना बाध्यकारी है:

[x]="someParentProperty" (xChange)="someParentProperty=$event" 

आपके मामले में, आप चाहते हैं

<my-comp [(inputText)]="testString"></my-comp> 

तो अपने घटक एक inputText होना आवश्यक है इनपुट प्रॉपर्टी और inputTextChange आउटपुट प्रॉपर्टी (जो EventEmitter है)।

export class MyComp { 
    @Input() inputText: string; 
    @Output() inputTextChange: EventEmitter<string> = new EventEmitter(); 
} 

परिवर्तन, जब भी आपके घटक inputText का मूल्य बदलता है की मूल एक घटना को सूचित करने के लिए, फेंकना:

inputTextChange.emit(newValue); 

---

अपने परिदृश्य में, MyComp घटक बांधता इनपुट संपत्ति inputText का उपयोग कर [(x)] ngModel के लिए प्रारूप, इसलिए आपने घटनाओं को बाध्यकारी (ngModelChange) का उपयोग परिवर्तनों के अधिसूचित होने के लिए किया था, और उस ईवेंट हैंडलर में आपने परिवर्तन के मूल घटक को अधिसूचित किया था।

अन्य परिदृश्यों में जहां ngModel का उपयोग नहीं किया जाता है, महत्वपूर्ण बात emit() एक घटना होती है जब भी संपत्ति का मूल्य inputText MyComp घटक में परिवर्तन करता है।

Answer 2

आपके प्लंकर में पहले से ही EventEmitter है। @Output() एनोटेशन गुम है। मूल्य कॉल inputTextChanged.emit(newValue) (यह भी inputText पर मूल्य में परिवर्तन)

Answer 3

मैं @pixelbits साथ कर देंगे और @ गुंटर Zöchbauer जवाब और टिप्पणियों यदि भविष्य में कोई इस के लिए खोज कर रहा है मेरे सवाल पर एक स्पष्ट जवाब बनाने के लिए बदलने के लिए।

कस्टम वैरिएबल पर बिडरेक्शनल डेटा बाध्यकारी काम करने के लिए आपको निम्न पर आधारित अपना घटक बनाने की आवश्यकता है।

MyComp.ts दायर:

import {Component,Input,Output,EventEmitter} from 'angular2/core' 
@Component({ 
    selector:'my-comp', 
    templateUrl:`<input type="text" style="text-align:center;" 
    [ngModel]="inputText" (ngModelChange)="inputText=$event;inputTextChange.emit($event);">` 
}) 

export class MyComp{ 
    @Input() inputText : string; 
    @Output() inputTextChange = new EventEmitter(); 
} 

MyApp.ts फ़ाइल:

import {Component} from 'angular2/core' 
import {MyComp} from './MyComp' 

@Component({ 
    selector:'my-app', 
    templateUrl:`<h1>Bidirectionnal Binding test </h1> 
    <my-comp [(inputText)]="testString"></my-comp><p> 
    <b>My Test String :</b> {{testString}}</p>`, 
    directives:[MyComp] 
}) 

export class MyApp{ 
    testString : string; 
    constructor(){ 
    this.testString = "This is a test string"; 
    } 
} 

वहाँ द्विदिश डेटा inputText चर के लिए बाध्य सही ढंग से काम करता है। आप इस कोड को लागू करने के लिए एक और अधिक सुंदर या सरल तरीके से उत्तर टिप्पणी कर सकते हैं।