typescript - navigationend - Angular 2 ngModel en el componente secundario actualiza la propiedad del componente principal

title angular 6

Question

Hice una interfaz de usuario simple que consta de dos componentes (padre e hijo).

Lo que hace la interfaz de usuario es que cuando escribo algunas cosas en el cuadro de entrada del componente secundario. El valor cambiará usando ngModel.

El componente hijo funciona bien de esa manera.

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

Ahora tengo un componente principal que pretendo usar el mismo valor que Child Component.

sharedVar el componente sharedVar en la plantilla principal y uso la inyección de dependencia para llamar al sharedVar Child Component.

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

El problema es que mientras escribo en el cuadro de entrada, el valor en <p> cambia automáticamente mientras que el valor en el componente primario <h1> no cambia.

Answer 1

Podemos usar la sintaxis [(x)] en la plantilla primaria para lograr la unión de datos bidireccional con el niño. Si creamos una propiedad de salida con el nombre xChange , Angular actualizará automáticamente la propiedad principal. Sin embargo, necesitamos emit() un evento cada vez que el niño cambie el valor:

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

sharedVarParent en ParentComponent solo para demostrar que los nombres no tienen que ser los mismos en el padre y el hijo.

Answer 2

Puede configurar la comunicación del emisor del evento ( outputs ) de un niño a uno principal. Por ejemplo, así:

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

y el componente en el padre:

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

    }
}

Demostración: http://plnkr.co/edit/T2KH4nGKPSy6GEvbF1Nb?p=info