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

【问题标题】：Angular2: How to reset input property after it is changed from child component programatically but not changed in parent binding?Angular2：如何在以编程方式从子组件更改输入属性但在父绑定中未更改后重置输入属性？
【发布时间】：2019-06-19 03:56:05
【问题描述】：

我有两个组件，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';，会发生什么？

我认为父母的输入绑定不是synced与孩子，因为从现在开始他们有不同的状态。如果我查询console.log(this.status)，它会说bad。如果我想让它们保持同步，我必须使用一些输出绑定。
如何确保在以编程方式更改后输入绑定仍然有效。比如说，对于一个tick，它会更改为bad，但由于来自父级的绑定，它会自动更改回good。

【问题讨论】：

也许正是你要找的东西：stackoverflow.com/questions/35623868/…
@J.S.不，这似乎是不同的问题。我正在寻找的是角度如何工作，理论上，我绝对知道两种方式绑定。但是对于这种情况，由于我使用的是常量字符串，因此无法调用输出。
@Vincent-cm 如果我正确理解了您的问题，那么您需要将价值父母发送给孩子，并希望从孩子向父母发送一些价值。？
当您将常量字符串传递给您的孩子并将其存储在类似status 的属性中，然后将状态从“好”更改为“坏”时，您唯一的选择就是访问例如，通过@ViewChild 来自父级的状态属性。通过@Input 传递常量参数只会在子组件初始化期间生效。对于您的用例，您肯定必须使用引用而不是常量

标签： javascript angular typescript components

【解决方案1】：

父组件基本不会监听子组件的变化，除非子组件使用父组件作为输入，比如

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

在父组件中

this.parent = this

否则，可以在子组件中为状态创建一个Output，父组件可以监听

@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)

【讨论】：