Question

我是Angular2（beta1）的新手，我想实现一种由2个组件构成的简单可编辑网格。在这里，我使用两个假数据组件来保持简单。它们是（参见此Plunker：http://plnkr.co/edit/5cZfLTIlhLc82wWV4PQI）：

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

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

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

联系：用户编辑表单，然后点击提交按钮进行保存整个东西。因此，我可以只有一些代码处理提交按钮并发出一个事件作为组件输出。该联系人有entries 数组属性：因此我可以在其模板中使用ngFor指令进行渲染每个人的入口组件。
条目：该条目包含属性addressCtl和zipCtl，代表 ControlGroup中包含的控制指令代表整体形成。此外，我需要一些属性作为输入绑定组件（address和zip），以便在父模板中我可以执行以下操作：
```
<tr *ngFor="#e of entries">
  <td><my-entry [address]="e.address" [zip]="e.zip"></my-entry></td>
</tr>
```

现在，我不清楚如何塑造＆＃34;模型＆＃34;之间的关系。代表控件输入的属性，以及＆＃34;形式＆＃34;指令属性。我应该能够通过[...]绑定从父组件获取地址和zip值，并通过子组件触发的事件（例如模糊？）传递更新的值。这在NG2世界中是否有意义？无论如何，我在这里错过了一个部分：如何将表单控件值连接到模型属性值？任何人都可以更清楚地指出或指向一些好的文档吗？

Answer 1

实际上，使用[...]绑定仅对应于单向绑定。在父组件中更新父属性时，该值也会在子组件中更新。

但是如果要更新子项的父属性，则需要利用事件和@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;
  }
}

通过这种方式，您可以在此组件上使用双向绑定：

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

希望它能回答你的问题，亨利

Answer 2

刚刚将评论移至答案......

您可以传递对象e，而不是传递字符串。即

<my-entry [entry] = "e"></my-entry>

然后在你的my-entry组件中，为每个输入使用ng-model。所以你自动获得双向绑定。

基于Angular2模型的父/子形式

2 个答案: