Angular2基于模型的父/子表单

Posted 2023-03-13

【中文标题】Angular2基于模型的父/子表单

【英文标题】：Angular2 model-based parent/children form

【发布时间】：2016-05-06 11:01:56

【问题描述】：

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

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

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

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

联系方式：用户编辑表单，然后点击提交按钮保存 整个东西。因此，我可以让一些代码处理提交按钮 并发出一个事件作为组件输出。联系人有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>

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

【问题讨论】：

为什么不传对象e，而是传字符串？即 。然后在您的 my-entry 组件中，对每个输入使用 ng-model。所以你会自动获得 2 路绑定。

谢谢，我没有想过这个策略。我在embed.plnkr.co/2y2wew60EJLyu45XxlLg 为感兴趣的读者制作了一个新的 Plunker。请发表您的评论作为回复，以便我将其标记为答案。

谢谢@Naftis，我已经做到了。如果需要，您可以使用 plunker 链接编辑答案。

【参考方案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>

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

【参考方案2】：

刚刚移动评论回答...

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

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

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

【讨论】：

当您指定一个对象作为子组件输入属性的值时，我们不会“获得自动双向数据绑定”。发生的情况是父组件和子组件现在每个都有一个属性都指向同一个/一个对象。它与 Angular 双向数据绑定无关。它与 javascript 引用类型有关。

@MarkRajcok，我同意你的看法。对不起，我用错了词。这个（绑定原始类型和/或对象到作用域）在 Angular 1 中已经解释过很多次了。我只是懒得再解释一遍。