Angular2：如何在以编程方式从子组件更改但未在父绑定中更改后重置输入属性？

Question

I have two components, parent.component.ts and child.component.ts , the template, parent.component.html likes below:

<div>
    <child-component [status]="'good'" (click)="changeToBad()"></child-component>
</div>

I bind a constant string good intentionally to demonstrate my concern. So, initially, the good string is passed to the child component . But if I change its value in child.component.ts , like this.status = 'bad'; , what will happen?

1. I think the input binding of parent is not synced with the child, since from now on they have different status. If I query console.log(this.status) , it will say bad . If I want to keep them in sync, I have to use some output bindings.

2. How I can do to make sure the input binding still work after the programmatically change. Say, it changes to bad for one tick , but it changes back to good (automatically) since the binding from parent.

Answer 1

The parent basically doesn't listen to the change in the child component, unless the child component use the parent as an input, like

<child-component [parent]="parent"></child-component>

and in the parent component

this.parent = this

Otherwise, you can create an Output for the status in the children component and the parent component can listen to it

@Output() public statusEvt = new EventEmitter<boolean>();

and

<child-component (statusEvt)="updateStatus($event)"></child-component>

so in the parent component, you can add this function

public updateStatus(evt: boolean) {
    this.status = evt;
}

when you want to emit the change, in the child component, just call

this.statusEvt.emit(this.status)