Angular - 从子组件获取数据？答案

【问题标题】：Angular - Getting data from a child component?Angular - 从子组件获取数据？
【发布时间】：2018-02-27 11:00:30
【问题描述】：

我有一个包含用户记录的表。有一列“标签”允许您用一个或多个值标记记录。

为此，我在行上创建了一个编辑按钮。单击后，我会显示一个包含在 ngIf 中的组件。

<span *ngIf="inEditMode(r.RuleParentID, a.AttributeID)">
 <app-inline-select [selected]="a" [source]="fetchSourceList(a.AttributeID)" [ruleParentID]="r.RuleParentID" [attributeID]="a.AttributeID"></app-inline-select>
</span>

包含的component 使用Select2 允许多选输入字段。

这一切都很好。但是，我现在需要在我的父组件中添加一个Save Button，它将一些数据发送到我的服务。不过，我需要来自这个包含组件的数据。

在一些研究中，我认为ViewChild 可能是一个选项，但这个组件在ngFor 循环内多次出现在页面上，所以它本质上是动态的，不允许我直接按名称调用它，这就是@ 987654328@ 需要。

我该如何获取数据？保存按钮与其自身包含的组件无关。

【问题讨论】：

标签： angular

【解决方案1】：

selected 是一个事件而不是属性，因此您需要将其包装在 () 而不是 [] 中。您可以调用函数来确定触发选定事件时需要执行的操作。

<span *ngIf="inEditMode(r.RuleParentID, a.AttributeID)">
 <app-inline-select (selected)="saveToArray($event)" [source]="fetchSourceList(a.AttributeID)" [ruleParentID]="r.RuleParentID" [attributeID]="a.AttributeID"></app-inline-select>
</span>

在组件中

    arrays = []
    saveToArray(a) {
      this.array.push(a);
    }

然后

   onSave() {
     this.service.save(arrays).then(() => {})
   }

还有viewChildren，您将在其中拥有一系列组件。所以你可以遍历每个组件并获取数据。

  @ViewChildren(InlineSelectComponent) alerts: QueryList<InlineSelectComponent>

  ngAfterViewInit() {
    this.alerts.forEach(instance => console.log(instance));
  }

【讨论】：

selected 是我传递给组件的属性。它是已经选择的值的列表。名不副实？也许吧，但与你提到的事件无关。
我看到的唯一问题是，可以说我在页面上有 10 条记录。用户可以一次编辑多个记录，从而公开一个或多个包含的组件。然后将它们推送到的数组不与任何一个特定子关联，以便知道哪些值属于哪些组件
@SBB 还有 viewChildren 可以循环遍历子组件
谢谢，看来可以。现在尝试实施，我会通知您

【解决方案2】：

要将数据从子组件传递回父组件，您可以使用 EventEmitter。有一个帖子显示了如何做到这一点： https://stackoverflow.com/a/42109866/7194432

【讨论】：

那么我的父级（保存按钮在哪里）如何告诉子级（包含的组件）将其值发送回父级？
我假设EventEmitter会由childcomponent基于change事件触发，而不是示例中的click事件。