基于Angular2模型的父/子形式-Java 学习之路

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

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

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

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

contact ：用户编辑表单，然后单击提交按钮以保存整个内容 . 因此，我可以只使用一些代码处理提交按钮并将事件作为组件输出发出 . 该联系人具有 entries 数组属性：因此，我可以在其模板中使用 ngFor 指令为每个指令呈现一个条目组件 .
entry ：该条目具有属性 addressCtl 和 zipCtl ，它们表示 ControlGroup 中包含的控制指令，表示整个表单 . 此外，我需要绑定几个属性作为组件的输入（ address 和 zip ），以便在父模板中我可以执行以下操作：

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

现在，它输入's not clear to me how to shape the relation between the 2978125 properties representing the control'和"form"指令属性 . 我应该能够通过 [...] 绑定从父组件获取地址和zip值，并通过子组件触发的事件（例如模糊？）传递更新的值 . 这在NG2世界中是否有意义？无论如何，我在这里错过了一个部分：如何将表单控件值连接到模型属性值？谁能让这个更清楚或指向一些好的文档？

2 回答

2
刚刚发表评论回答......

您可以传递对象e，而不是传递字符串 . 即
```
<my-entry [entry] = "e"></my-entry>
```
然后在你的my-entry组件中，为每个输入使用ng-model . 所以你自动获得双向绑定 .
回复于 2024-04-20T10:57:38+08:00

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

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

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

回复于 2024-04-20T10:57:38+08:00

基于Angular2模型的父/子形式

2 回答

相关问题