angular - 如何在 Angular 2 中的组件之间使用双向数据绑定(bind)？

Question

首先我创建了一个 User类:

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

然后我得到了我的 CoreComponent它使用 FormInputComponent以及创建一个 public user来自 User类:

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

然后我创建了一个输入组件，这是一个可重复使用的输入组件，它将模型值作为输入，并在进行更改时导出新值，以便 CoreComponent可以使用新值更新模型:

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

CoreComponent的模板使用两个 FormInputComponent s 和通行证 user.name和 user.email作为他们的输入:

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

FormInputComponent模板:

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

现在的问题是我只能看到 pre 的变化FormInputComponent 中的元素模板，但父级，CoreComponent的 pre元素保持不变。

我看了this question这是我想要实现的目标，但还不够，因为如果你有多个 FormInputComponent，使用一个服务来返回层次结构中的值似乎有点矫枉过正而且有点乱。在同一页上。

所以我的问题很简单，如何将模型传递给 FormInputComponent并让它在值更改时返回一个新值，以便 public user在 CoreComponent自动更改？

Answer 1

为了能够在使用您的组件时使用双向短绑定(bind)，您需要将您的输出属性自述到 modelChange:

export class FormInputComponent implements DoCheck {
  @Input() model: string;
  @Output() modelChange: EventEmitter = new EventEmitter();

  ngDoCheck() {
    this.modelChange.next(this.model);
  }
}

并以这种方式使用它:

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