¿Cómo utilizar el enlace de datos bidireccional entre componentes en angular 2?
Primero he creado unUser
clase:
export class User {
name: string;
email: string;
}
Entonces tengo miCoreComponent
que usa elFormInputComponent
además de crear unpublic user
desde elUser
clase:
import {Component} from 'angular2/core';
import {FormInputComponent} from '../form-controls/form-input/form-input.component';
import {User} from '../core/user';
@Component({
selector: 'core-app',
templateUrl: './app/assets/scripts/modules/core/core.component.html',
styleUrls: ['./app/assets/scripts/modules/core/core.component.css'],
directives: [FormInputComponent]
})
export class CoreComponent {
public user: User = {
name: '',
email: ''
}
}
Luego he creado un componente de entrada, que es un componente de entrada reutilizable que tomará un valor de modelo como entrada y cuando se realicen cambios, exporte el nuevo valorCoreComponent
puede actualizar el modelo con el nuevo valor:
import {Component, Input, Output, EventEmitter, DoCheck} from 'angular2/core';
@Component({
selector: 'form-input',
templateUrl: './app/assets/scripts/modules/form-controls/form-input/form-input.component.html',
styleUrls: ['./app/assets/scripts/modules/form-controls/form-input/form-input.component.css'],
inputs: [
'model',
'type',
'alt',
'placeholder',
'name',
'label'
]
})
export class FormInputComponent implements DoCheck {
@Input() model: string;
@Output() modelExport: EventEmitter = new EventEmitter();
ngDoCheck() {
this.modelExport.next(this.model);
}
}
losCoreComponent
La plantilla utiliza dosFormInputComponent
sy pasauser.name
yuser.email
como la entrada para ellos:
<form-input [model]="user.name" type="text" name="test" placeholder="This is a test" alt="A test input" label="Name"></form-input>
<form-input [model]="user.email" type="email" name="test" placeholder="This is a test" alt="A test input" label="Email"></form-input>
<pre>{{user.name}}</pre>
losFormInputComponent
modelo:
<div>
<label attr.for="{{name}}">{{label}}</label>
<input [(ngModel)]="model" type="{{type}}" placeholder="{{placeholder}}" alt="{{alt}}" id="{{name}}">
</div>
<pre>{{model}}</pre>
Ahora el problema es que solo puedo ver los cambios desde elpre
elemento que se encuentra dentro delFormInputComponent
plantilla, pero el padre,CoreComponent
'spre
El elemento permanece sin cambios.
Miréesta pregunta que está en el estadio de lo que quiero lograr, pero no del todo, ya que usar un servicio solo para devolver un valor en la jerarquía parece excesivo y un poco desordenado si tiene múltiplesFormInputComponent
s en la misma página.
Entonces mi pregunta es simple, ¿cómo puedo pasar un modelo aFormInputComponent
y dejar que devuelva un nuevo valor cada vez que el valor cambia para que elpublic user
enCoreComponent
cambia automáticamente?