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




angular angular2-ngmodel (2)

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

यूआई क्या करता है कि जब मैं बाल घटक के इनपुट बॉक्स में कुछ सामान टाइप करता हूं। मूल्य 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> परिवर्तन नहीं होता है।


आप बच्चे से माता-पिता से ईवेंट एमिटर संचार ( 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


हम बच्चे के साथ दो-तरफा डाटाबेसिंग प्राप्त करने के लिए मूल टेम्पलेट में [(x)] वाक्यविन्यास का उपयोग कर सकते हैं। यदि हम xChange नाम के साथ आउटपुट प्रॉपर्टी 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

मैंने केवल माता-पिता और बच्चे में नामों को समान नहीं होने के लिए माता-पिता को साझा करने के लिए माता-पिता को साझा किया।





angular2-ngmodel