当父级更改值时，Angular 7不会更新子级

Question

我有一个问题由以下步骤定义：

1. 我通过@input将值从父级传递给子级
2. 我的孩子将这个@input绑定到一个输入元素
3. 我通过事件发射器将更改的值传回父级
4. 我的父母抓住了这个事件并传递给了一个函数。
5. 函数实现输入无效并将值更改回有效值
6. 此更改的值通过@input传递回子节点
7. 我重复这些步骤
8. 但是我的函数现在将值更改回其先前的@input上的确切值，因此子组件不会接收更改，我的父和子现在不同步并保持这种状态直到我输入有效价值再次。

我在这里创建了一个stackblitz来说明这个问题。 https://stackblitz.com/edit/angular-kbpx7r如果再次输入99然后再输入99，您将看到父母和孩子不同步。您可以输入10以下的任何数字以使它们恢复同步但我的问题是我需要弄清楚如何让它们始终保持同步。

Answer 1

我将（更改）事件添加到子组件中的输入字段，我看到它按预期工作。我看到之前没有发现变化。 （更改）事件现在跟踪它。请尝试分享反馈/建议。

child.component.html

<p>
  Keep Number under 10<br>
<input id="{{id}}" [(ngModel)]="value" (blur)="emitValue($event)" (change)="emitValue($event)" type="text"><br>
The child value is: {{value}}
</p>

Answer 2

所以，你的问题如下：

当您第二次调用99时，parentValue始终设置为5。

所以对孩子来说，没有变化。目前没有任何东西可以通过ngOnChanges。

这就是孩子第二次没有获得5分的原因。

为了确认我，你可以测试：

if(newValue.value > 10){ 
  this.parentValue = 4;
  this.parentValue = 5;
}else{
  this.parentValue = newValue.value;
}

然后你将有两个电话，所以改变。