बाल घटक अद्यतन में कोणीय 2 एनजी मॉडल, पैरेंट घटक संपत्ति

Question

मैंने एक साधारण यूआई बनाया जिसमें दो घटक (माता-पिता और बच्चे) शामिल हैं।

यूआई क्या करता है कि जब मैं बाल घटक के इनपुट बॉक्स में कुछ सामान टाइप करता हूं। मूल्य ngModel का उपयोग कर बदल जाएगा।

बच्चा घटक इस तरह से ठीक काम करता है।

// Child Component 
@Component({ 
    selector: 'child', 
    template: ` 
     <p>{{sharedVar}}</p> 
     <input [(ngModel)]="sharedVar"> 
    ` 
}) 
export class ChildComponent { 
    sharedVar: string; 
} 

अब मेरे पास एक मूल घटक है जिसे मैं बाल घटक के समान मूल्य का उपयोग करना चाहता हूं।

मैंने बाल घटक को बाल टेम्पलेट में जोड़ा, और चाइल्ड कंपोनेंट के sharedVar पर कॉल करने के लिए निर्भरता इंजेक्शन का उपयोग किया।

// Parent Component 
@Component({ 
    selector: 'parent', 
    template: ` 
     <h1>{{sharedVar}}</h1> 
     <child></child> 
    `, 
    directives: [ChildComponent], 
    providers: [ChildCompnent] 
}) 
export class ParentComponent { 
    sharedVar: string; 
    constructor(child: ChildComponent) { 
     this.sharedVar = child.sharedVar; 
    } 
} 

समस्या यह है के रूप में मैं इनपुट बॉक्स में टाइप कर रहा हूँ, स्वचालित रूप से <p> परिवर्तन में मूल्य समय में मूल्य माता पिता घटक के <h1> नहीं बदलते।

Answer 1

हम [(x)] वाक्य रचना माता पिता टेम्पलेट में दो तरह से डेटा बाइंडिंग प्राप्त करने के लिए उपयोग कर सकते हैं बच्चे के साथ यदि हम xChange नाम के साथ आउटपुट संपत्ति बनाते हैं, तो कोणीय स्वचालित रूप से मूल संपत्ति को अपडेट कर देगा। हम emit() को एक घटना जब भी बच्चे तथापि मूल्य में परिवर्तन की आवश्यकता है:

import {Component, EventEmitter, Input, Output} from 'angular2/core' 

@Component({ 
    selector: 'child', 
    template: ` 
     <p>Child sharedVar: {{sharedVar}}</p> 
     <input [ngModel]="sharedVar" (ngModelChange)="change($event)"> 
    ` 
}) 
export class ChildComponent { 
    @Input() sharedVar: string; 
    @Output() sharedVarChange = new EventEmitter(); 
    change(newValue) { 
     console.log('newvalue', newValue) 
     this.sharedVar = newValue; 
     this.sharedVarChange.emit(newValue); 
    } 
} 

@Component({ 
    selector: 'parent', 
    template: ` 
     <div>Parent sharedVarParent: {{sharedVarParent}}</div> 
     <child [(sharedVar)]="sharedVarParent"></child> 
    `, 
    directives: [ChildComponent] 
}) 
export class ParentComponent { 
    sharedVarParent ='hello'; 
    constructor() { console.clear(); } 
} 

Plunker

मैं ParentComponent में sharedVarParent इस्तेमाल किया सिर्फ प्रदर्शित करने के लिए है कि नाम में ही होना आवश्यक नहीं है माता-पिता और बच्चे।

Answer 2

आप बच्चे से माता-पिता से ईवेंट एमिटर संचार (outputs) सेट अप कर सकते हैं।

@Component({ 
    selector: 'child', 
    template: ` 
     <p>Child: {{sharedVar}}</p> 
     <input [(ngModel)]="sharedVar" (ngModelChange)="change()"> 
    ` 
}) 
export class ChildComponent { 
    @Output() onChange = new EventEmitter(); 
    sharedVar: string; 
    change() { 
     this.onChange.emit({value: this.sharedVar}); 
    } 
} 

और माता पिता में घटक: इस तरह उदाहरण के लिए

@Component({ 
    selector: 'parent', 
    template: ` 
     <h1>{{sharedVar}}</h1> 
     <child (onChange)="sharedVar = $event.value"></child> 
    `, 
    directives: [ChildComponent] 
}) 
export class ParentComponent { 
    sharedVar: string; 
    constructor() { 

    } 
} 

डेमो:http://plnkr.co/edit/T2KH4nGKPSy6GEvbF1Nb?p=info