2

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

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

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

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

  1. 联系人：用户编辑表单，然后单击提交按钮以保存整个内容。因此，我可以让一些代码处理提交按钮并发出一个事件作为组件输出。联系人有一个entries 数组属性：因此我可以ngFor在其模板中使用一个指令来为每个联系人呈现一个入口组件。

  2. entry：该条目具有属性addressCtl，zipCtl这些属性表示包含在ControlGroup表示整个表单中的控制指令。此外，我需要将几个属性绑定为组件 (address和zip) 的输入，以便在父模板中我可以执行以下操作：

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

现在，我不清楚如何塑造表示控件输入的“模型”属性与“表单”指令属性之间的关系。我应该能够通过[...]绑定从父组件获取地址和 zip 值，并通过子组件触发的事件（例如模糊？）将更新的值向上传递。这在 NG2 世界中有意义吗？无论如何，我在这里遗漏了一块：如何将表单控件值连接到模型属性值？任何人都可以更清楚地说明这一点或指出一些好的文档吗？

4

2 回答 2

2

实际上，使用[...]绑定只对应一种单向绑定。当父组件中的父属性更新时，子组件中的值也会更新。

但是如果你想从孩子更新父属性，你需要利用事件和@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>

希望它能回答你的问题，蒂埃里

于 2016-01-29T11:01:30.830 回答
1

刚把评论移到回答...

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

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

然后在您的 my-entry 组件中，对每个输入使用 ng-model。所以你会自动获得 2 路绑定。

于 2016-01-29T22:05:48.293 回答