Блог

Я пытаюсь создать двустороннюю привязку в компоненте и распространить ее через другие компоненты, содержащие дочерний компонент:

У меня есть дочерний компонент с двусторонней привязкой, и он работает. Привязка указывает на переменную с именем child_value

Тогда этот дочерний компонент присутствует в шаблоне родительского компонента. Я тоже хочу двустороннюю привязку, поэтому я использую [(child_value)]=parent_value

Наконец, этот родительский компонент используется в моем приложении, поэтому в этом компоненте я также хочу двустороннюю привязку, например [(parent_value)]=application_value

Но только первая привязка работает в двух направлениях. Чтобы проиллюстрировать это, я создал этот плунжер

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

Когда вы перетаскиваете ползунок, вы можете видеть, что дочернее значение обновляется, а остальные — нет. Если я изменяю код application_value in с помощью кнопки, то он распространяется по всем компонентам.

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. Поймите двустороннюю привязку и заставьте ее работать:

Вот причина, по которой двусторонняя привязка не работает в вашем случае:

Синтаксис banana in the 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

Второй плунжер, который имеет рабочую двустороннюю привязку: http://plnkr.co/edit/M5CPqrgWJ53vBkqhVz4f?p=preview