Angular 2/4 父子通信答案

【问题标题】：Angular 2/4 parent child communicationAngular 2/4 父子通信
【发布时间】：2018-03-23 01:49:20
【问题描述】：

我正在编写具有父子关系的应用程序，我正在寻找处理数据/事件流的最佳实践。 parent 具有发送到子组件的项目列表。

子组件具有用于更新当前值的数据条目。此时，正在从子级处理更新值。我做了以下事情：当我从服务器获得成功时，我只是确保子值没问题。我已经使这些数据传播到父级（eventEmitter）成为可能，但此时我没有对此做任何事情？我是否应该在这里使用双向数据绑定？或者我应该使用 onActivityUpdated 将该项目传播给父项？孩子是否应该处理呼叫服务并更新该值？

子列表显示为列表（同一页面上的所有数据），因此可以编辑一个孩子，然后另一个，......然后应该有从父母那里保存所有选项。处理此问题的最佳方法是什么？父母是否应该发起对服务的调用，然后更改所有值？

这里的代码到目前为止，我已经省略了大部分不必要的东西......

parent 有一个项目列表，像这样发送给孩子：

ts：

export class ParentComponent implements OnInit {
//Filtered items
@Input()
public items: Client[];

html:

<case-activity-time-edit-item *ngFor="let item of items; let i = index" [(element)]="items[i]" (activityUpdated)="onActivityUpdated($event)"></case-activity-time-edit-item></div>

这是孩子：

export class ChildComponent implements OnInit {
@Input()
public element: Client;

@Output()
public activityUpdated: EventEmitter<Client> = new EventEmitter<Client>();

【问题讨论】：

如果我们在这里处理对象，我们需要记住对象在 JS 中是可变的，所以在这种情况下它们是通过引用传递的，所以无论你对 child 中的数据做什么，parent 都会即使没有事件发射器也知道。请注意，这可能并不总是您想要的，但您似乎希望在这里发生这种情况。似乎某种形式在这里会很有用，因为您正在谈论编辑和保存数据。我会使用反应形式，它有很多功能真的很棒！ :)

标签： angular

【解决方案1】：

你所做的一切看起来都不错。我唯一的建议是使用两种方式绑定来保持父值和子值同步：

_element: Client;
@Input() set element(val) {
  this._element = val;
}
get element() {
  return this._element;
}

【讨论】：