角度2/4亲子沟通

Question

i am programming app which has parent-child relationship, and i am looking for best-practice for handling data/event flow. parent has list of items which are sent to child component.

Child component has data entries for updating current values. At this moment, updating values are being handled from children. I've made following: when i get success from server,i just make sure that child values are ok. I've made possible that this data is propagated to parent (eventEmitter) but at this moment i am not doing anything with this? Should I be using two-way data binding here or not? Or should i use onActivityUpdated to propagate that item to parent? Should child be handling call to service and updating that value?

Children list is shown as a list (all data on same page), so it's possible to edit one child, then another, ... and then there should be save all option from parent. What is the most optimal way to handle this? Should parent initiate call to service and then change all values?

here's code so far, i've ommited most of the unneccessary stuff...

parent has a list of items, which is sent to children like this:

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>

here's child:

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

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

Answer 1

Everything you're doing looks good. My only suggestion is to keep the parent and child value in sync using two way binding:

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