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

Question

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

我有一个带有双向绑定的子组件，它正在工作。绑定指向一个名为child_value

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

最后，在我的应用程序中使用了此父组件，因此在此组件中，我还希望双向绑定 [(parent_value)]=application_value

但是只有第一个绑定以两种方式起作用。为了说明这一点，我创建了这个punker

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

拖动滑块时，您会看到Child值更新，而其他值没有更新。如果我application_value通过按钮更改了in代码，则它将在所有组件中传播。

Answer 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});
  }

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

2.了解双向绑定并使其起作用：

这是双向绑定对您的案例不起作用的原因：

框语法（[(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

具有双向绑定功能的第二个插件：http ://plnkr.co/edit/M5CPqrgWJ53vBkqhVz4f?p=preview