Как работает двухстороннее связывание в Angular 2?

Question

Я пытаюсь использовать двухстороннее связывание между двумя моими компонентами (родительским и дочерним компонентами) и пытаюсь обнаружить изменения, вызванные этим, в ngOnChanges обоих компонентов. Я могу вызвать ngOnChanges дочернего компонента (тестовый компонент), изменив свойство ввода / вывода родительского компонента (компонент приложения). Однако я не могу вызвать ngOnChanges компонента Parent, изменив свойство двусторонней привязки в компоненте Child.

Работающий Плункер можно найти здесь: https://plnkr.co/edit/AGh6EM9l9ENMufb9JWPW?p=preview

import { Component, OnInit, OnChange, Output, Input, EventEmitter } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
              <h3>Two Way Parent - {{twoWaySend}} </h3>

              <button (click) =  "oneWayButtonPressed()">Increase oneWay from Parent</button>
              <button (click) = "twoWayButtonPressed()">Increase TwoWay from Parent</button>  
                <test-component [oneWayReceive] = 'oneWaySend' 
              [(twoWayReceive)] = 'twoWaySend'></test-component>`
})
export class AppComponent implements OnChanges{ 
  name = 'Angular';
  oneWaySend = "You shall pass";
  twoWaySend = "You shall both ways";
  counter:int = 0;
  negativeCounter:int = 0;
  oneWayButtonPressed() {
    this.oneWaySend = `${this.oneWaySend} ${++this.counter}`;
  }
  twoWayButtonPressed() {
    this.twoWaySend = `${this.twoWaySend} ${--this.negativeCounter}`;
  }
  ngOnChanges() {
    console.log('ngOnchange Parent ' + this.twoWaySend);
  }
}



@Component({
  selector: 'test-component',
  template: `<h1>TestComponent {{name}}  {{oneWayReceive}}</h1>
            <h3>Two Way Child - {{twoWayReceive}}</h3>  
            <button (click) = "twoWayButtonPressed()">Change Two Way from Child</button>`
})
export class TestComponent implements OnChange {
  @Input() oneWayReceive;
  @Input() twoWayReceive;
  @Output() twoWayReceiveChange: EventEmitter<string> = new EventEmitter<string>();
  name = 'Angular';
  negativeCounter = 0;
  ngOnChanges() {
    console.log(`OneWayReceive ${this.oneWayReceive}   TwoWayReceive ${this.twoWayReceive}`);
  }
  twoWayButtonPressed() {
    this.twoWayReceive = `${--this.negativeCounter}  ${this.twoWayReceive}`;
    this.twoWayReceiveChange.emit(this.twoWayReceive);
  }
}

Answer 1

ngOnChanges Вызывается только тогда, когда родительский компонент передает другое значение для входа компонента. Вы просто не должны ожидать родительского компонента ngOnChanges вызываемый метод, так как он не имеет ни входных данных, ни родительского компонента.

Answer 2

В угловой документации указано, что ngOnChanges называется:

когда Angular (re) устанавливает привязанные к данным свойства ввода

Если вы хотите захватить это обновление;

Вы можете явно использовать привязку вывода / события вместо использования [()],

[twoWayReceive]="twoWaySend" (twoWayReceiveChange)="twoWaySendChange($event)"

И обработчик изменения вывода в вашем родительском компоненте будет

toWaySendChange(value: string) {
  this.twoWaySendChange = value;
  // do things that you wanted to do in ngOnChanges
}

Answer 3

Просто не можешь

"Я не могу вызвать ngOnChanges компонента Parent, изменив свойство двусторонней привязки в компоненте Child"

вы можете обнаружить это только от родителя к потомку, если вы хотите передать измененное значение или событие от потомка к родителю, который вы должны использовать @Outpput или же EventTrigger via Service