Angular 2通过组件的双向绑定传播答案

【问题标题】：Angular 2 two-way binding propagation through componentsAngular 2通过组件的双向绑定传播
【发布时间】：2016-10-07 01:52:15
【问题描述】：

我正在尝试在一个组件中进行双向绑定，并通过包含子组件的其他组件传播它：

我有一个子组件，具有双向绑定并且它正在工作。绑定指向一个名为child_value的变量

然后这个子组件出现在父组件的模板中。我这里也想要双向绑定，所以我用[(child_value)]=parent_value

最后在我的应用程序中使用了这个父组件，所以在这个组件中我还想要一个双向绑定，比如[(parent_value)]=application_value

但只有第一个绑定以两种方式工作。为了举例说明，我创建了这个 plunker

http://plnkr.co/edit/IWVzmRbqL3ARFaYxjs3F?p=preview

当您拖动滑块时，您可以看到 Child 值更新，但其他值没有。如果我通过按钮更改代码中的application_value，那么它将通过所有组件传播。

【问题讨论】：

标签： angular binding

【解决方案1】：

1.修复代码的最简单方法：

如果你检查你写入的控制台日志，你可以看到AppComponent和ParentComponent被valueChanged事件通知，你需要做的就是相应地更新变量的值：

在AppComponent:

  onchange(event)
  {
    this.application_value = event.value; // <-- add this line
    console.log('root::onchange() => value:' + event.value);
  }

在ParentComponent:

  onchange(event)
  {
    this.parent_value = event.value; // <-- add this line
    console.log('parent::onchange() => value:' + event.value);
    this.valueChanged.emit({value: event.value});
  }

这是供您参考的 plunker：http://plnkr.co/edit/TW2F6mdx1SJbdjKqonmO?p=preview

2。了解双向绑定并使其工作：

以下是双向绑定不适用于您的情况的原因：

box 语法中的香蕉 ([(child_value)]="someValue") 只是一个同时拥有[child_value]="someValue" 和 (child_valueChange)="someValue=$event".

而且由于您从未在组件中定义@Output() child_valueChange，因此返回方式被阻塞。解决它：

将您的 @Output() valueChanged 更改为 @Output() child_valueChange 在你的ChildComponent 和
将您的@Output() valueChanged 更改为 @Output() parent_valueChange 在你的 ParentComponent

具有工作双向绑定的第二个 plunker：http://plnkr.co/edit/M5CPqrgWJ53vBkqhVz4f?p=preview

【讨论】：

感谢您提供如此详尽的答案，我将解决方案 1 用作临时补丁，但我真正想知道的是为什么双向绑定不起作用，解决方案 2 解释得很好！