Angular2: Как сбросить свойство ввода после того, как оно изменено от дочернего компонента программно, но не изменено в родительской привязке?

Question

У меня есть два компонента, parent.component.ts и child.component.ts, шаблон, parent.component.html нравится ниже:

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

Я специально связываю постоянную строку good, чтобы продемонстрировать свою озабоченность. Итак, изначально строка good передается в child component. Но если я изменю его значение в child.component.ts, например this.status = 'bad';, что произойдет?

1. Я думаю, что входная привязка parent не совпадает с synced с потомком, поскольку с этого момента они имеют другой статус. Если я сделаю запрос console.log(this.status), он скажет bad. Если я хочу синхронизировать их, я должен использовать некоторые выходные привязки.

2. Как я могу сделать так, чтобы привязка ввода все еще работала после программного изменения. Скажем, он меняется на bad для одного tick, но возвращается к good (автоматически) с момента привязки от родителя.

Answer 1

Родитель в основном не слушает изменения в дочернем компоненте, если только дочерний компонент не использует родительский в качестве входных данных, например

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

и в родительском компоненте

this.parent = this

В противном случае вы можете создать выход для состояния в дочернем компоненте, а родительский компонент может прослушивать его

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

и

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

, поэтому в родительском компонентеВы можете добавить эту функцию

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

, когда вы хотите применить изменение, в дочернем компоненте, просто вызовите

this.statusEvt.emit(this.status)