Zunächst habe ich ein @ erstelUser class:

export class User {
  name: string;
  email: string;
}

Dann habe ich meinCoreComponent welches das @ verwendFormInputComponent sowie ein @ erstellpublic user von demUser class:

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: ''
  }
}

Dann habe ich eine Eingabekomponente erstellt, bei der es sich um eine wiederverwendbare Eingabekomponente handelt, die einen Modellwert als Eingabe verwendet. Wenn Änderungen vorgenommen werden, exportieren Sie den neuen Wert, sodassCoreComponent kann das Modell mit dem neuen Wert aktualisieren:

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

DasCoreComponentie Vorlage von @ verwendet zweiFormInputComponents und Pässeuser.name unduser.email als Eingabe für sie:

<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>

DasFormInputComponent Vorlage

<div>
  <label attr.for="{{name}}">{{label}}</label>
  <input [(ngModel)]="model" type="{{type}}" placeholder="{{placeholder}}" alt="{{alt}}" id="{{name}}">
</div>
<pre>{{model}}</pre>

Nun ist das Problem, dass ich nur die Änderungen aus dem @ sehen kapre Element, das innerhalb des @ lieFormInputComponent template, aber der Elternteil,CoreComponent 'spre Element bleibt unverändert.

Ich sahdiese Frag, das im Ballpark von dem ist, was ich erreichen möchte, aber nicht ganz, da die Verwendung eines Dienstes zum Zurückgeben eines Wertes nach oben der Hierarchie wie übertrieben und ein bisschen chaotisch erscheint, wenn Sie mehrere @ habFormInputComponents auf derselben Seite.

So ist meine Frage einfach, wie kann ich ein Modell an @ übergebFormInputComponent und einen neuen Wert zurückgeben lassen, wenn sich der Wert ändert, so dass daspublic user imCoreComponent ändert sich automatisch?