Alt öğe bileşenindeki açısal 2 ngModel, üst bileşen özelliğini güncelleştirir

Question

İki bileşenden (ana ve alt) oluşan basit bir kullanıcı arayüzü oluşturdum.

Kullanıcı Arabiriminin giriş kutusunda bazı şeyleri yazarken UI'nın yaptığı şey. Değer ngModel kullanılarak değişecektir.

Alt öğe bu şekilde çalışıyor.

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

Şimdi, Çocuk Bileşeni ile aynı değeri kullanmayı amaçladığım bir ana bileşenim var.

Alt Bileşene Alt Bileşene ekledim ve Bağımlılık Enjeksiyonu'nu kullanarak Child Component'ın sharedVar numaralı telefonunu aradım. Ben giriş kutusuna yazarak yaşıyorum

// 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; 
    } 
} 

sorundur, otomatik <p> değer değişip değer ebeveyn bileşenin <h1> değişmez iken.

Answer 1

Biz iki yönlü veri bağlama ulaşmak için ana şablonunda [(x)] sözdizimi kullanabilirsiniz çocukla. xChange adıyla bir Çıkış özelliği oluşturursak, Angular ana özelliği otomatik olarak günceller. Sadece isimler aynı olmak zorunda olmadığını göstermek için ben ParentComponent içinde sharedVarParent kullanılan

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

: Biz emit() çocuk ancak değerini her değiştirdiğinde bir olay ihtiyacım var ebeveyn ve çocuk.

Answer 2

Çocuktan ebeveyne olay yayıcı iletişimi (outputs) ayarlayabilirsiniz.

@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}); 
    } 
} 

ve ebeveynde bileşeni: Böyle Örneğin

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

    } 
} 

Demo:http://plnkr.co/edit/T2KH4nGKPSy6GEvbF1Nb?p=info