forms - 基于 Angular2 模型的父/子表单

Question

我是 Angular2 (beta1) 的新手，我想实现一种简单的可编辑网格，由 2 个组件构建。在这里，我使用两个假数据组件来使事情变得简单。它们是(参见这个 Plunker: http://plnkr.co/edit/5cZfLTIlhLc82wWV4PQI ):

• 父组件，名为contact。假设它代表一个有名字的联系人。
• 子组件，名为entry。假设它代表一个联系人的条目，其中每个联系人可以包含 0 个或多个条目。每个条目都有一个地址和邮政编码。

我想创建一个表单，用户可以在其中编辑联系人的属性及其子条目:他可以添加新条目、删除现有条目或编辑现有条目。

为此，这两个组件的 View 都提供了基于表单的模板。 我可以想到这个数据流:

1. 联系人:用户编辑表单，然后单击提交按钮保存 整个东西。因此，我可以用一些代码来处理提交按钮 并发出一个事件作为组件输出。该联系人有一个条目 数组属性:因此我可以在其模板中使用 ngFor 指令来渲染 每个都有一个入口组件。

2. entry:条目具有 addressCtl 和 zipCtl 属性，分别代表 代表整体的 ControlGroup 中包含的控制指令 形式。另外，我需要绑定(bind)几个属性作为 组件(address 和 zip)，以便在父模板中我可以执行以下操作:

   <tr *ngFor="#e of entries">
     <td><my-entry [address]="e.address" [zip]="e.zip"></my-entry></td>
   </tr>
   

现在，我不清楚如何塑造表示控件输入的“模型”属性与“表单”指令属性之间的关系。我应该能够通过 [...] 绑定(bind)从父组件获取地址和邮政编码值，并通过子组件触发的事件向上传递更新的值(例如模糊？) 。这在 NG2 世界中有意义吗？不管怎样，我在这里遗漏了一个部分:如何将表单控件值连接到模型属性值？谁能更清楚地说明这一点或指出一些好的文档？

Answer 1

事实上，使用[...]绑定(bind)仅对应于单向绑定(bind)。当父组件中更新父属性时，子组件中的值也会更新。

但是，如果您想从子级更新父级属性，则需要利用事件和 @Ouput 属性。

这是一个带有labels组件的示例:

export class LabelsComponent implements OnInit {
  @Input()
  labels:string[];

  @Output()
  labelsChange: EventEmitter;

  (...)

  removeLabel(label:string) {
    var index = this.labels.indexOf(label, 0);
    if (index != undefined) {
      this.labels.splice(index, 1);
      this.labelsChange.emit(this.labels);
    }
  }

  addLabel(label:string) {
    this.labels.push(this.labelToAdd);
    this.labelsChange.emit(this.labels);
    this.labelToAdd = '';
    this.addAreaDisplayed = false;
  }
}

这样您就可以利用此组件上的两种方式绑定(bind):

<labels [(labels)]="company.labels"></labels>

希望它能解答您的问题， 蒂埃里