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. 我认为父级的输入绑定与子级之间不是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)