时间戳

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

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

问题描述

我有两个组件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, like this.status = 'bad';，会发生什么？

  1. 我认为父母的输入绑定不synced与孩子，因为从现在开始他们有不同的状态。如果我查询console.log(this.status)，它会说bad。如果我想让它们保持同步，我必须使用一些输出绑定。

  2. 在以编程方式更改后，我如何确保输入绑定仍然有效。说，它更改为badfor one ，但自从与父级绑定tick后，它又更改回（自动）。good

标签： javascriptangulartypescriptcomponents

解决方案

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

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

推荐阅读