Question

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

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

的变量

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

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

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

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

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

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

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

1 个答案: