使用 NgFor 创建子组件，然后调用发出事件的方法

Question

我可以想出几种方法来破解这个问题，但我想要一些关于最'Angular'方法的建议。

我已经整理好了an example of what I'm doing。

主组件使用NgFor 迭代列表并创建一堆子组件。
每个子组件在单击时会发出一个事件，该事件由父组件拾取。每个孩子还有一个方法update()。

我想要的是让我的主要组件获取对发出事件的任何子组件的引用并调用其update() 方法的正确方法。

看起来很简单（可能很简单），但它是我正在构建的应用程序的一个核心功能，所以我希望它尽可能干净整洁。

为你的帮助干杯

Answer 1

由于 Angular 2 采用单向数据流范式，我认为解决这个问题的“最‘Angular’方式”是不调用update() 方法。子组件的状态应该由父组件提供。

每当点击发生时，新状态应在App（父）组件中计算，并将传递给ChildComponent。

这样，您将需要通过附加属性（例如clicked）扩展父级中保存的状态：

rowList = [{name: "Alice", clicked: false}, ...];

（当然，由于undefined与false具有相同的逻辑值，因此不需要显式声明。）

单击时，在处理程序方法中，计算新状态。在这种情况下，它只是一个简单的布尔值更改：

processClick(id){
  this.recentClick = id;
  // Create the new array for immutability benefits.
  this.rowList = this.rowList.map(person => {
    if (person.name === id) {
      return {name: person.name, clicked: true};
    } else {
      return person;
    }
  })
}

该值会像任何其他@Input 一样传递给孩子。

<my-child *ngFor="let row of rowList;" [id]=row.name [clicked]=row.clicked (onMD)="processClick($event)"></my-child>

现在，子组件可以根据clicked 属性的值更改其行为。作为奖励，当使用不可变数据时，您可以将更改检测策略更改为onPush for some performance benefits。

@Component({
    // ...
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent {
  @Input() clicked: boolean;

  get prefix() {
    return this.clicked ? "Bye!" : "Hi";
  }
  // ...
}

这种方法有很多好处。

• 您没有隐藏在子组件中的状态。父母的“话语”是绝对的（所谓的“单一事实来源”）。
• 父母并不真正需要知道或关心孩子如何处理数据或何时需要更新。
• 您可以轻松地在其他地方提取数据，并且无需编写任何代码来使 update() 行为有效。

完整的实现如下所示：http://plnkr.co/edit/IP8iLKxKGCjHOdgPHJ0h?p=preview

Answer 2

最简单的方法是使用模板变量来引用子组件：

<my-child #child *ngFor="let row of rowList;" [id]="row.name"
          (onMD)="processClick($event); child.update()"></my-child>

更新的演示：http://plnkr.co/edit/zA80iNsLHHULGx9Rbffw?p=preview