Angular 2 中的双向绑定如何工作？答案

【问题标题】：How does Two way binding works in Angular 2?Angular 2 中的双向绑定如何工作？
【发布时间】：2017-11-11 01:43:30
【问题描述】：

我正在尝试在我的两个组件（父组件和子组件）之间使用双向绑定，并尝试在两个组件的 ngOnChanges 中检测由此引起的更改。我可以通过更改父组件（应用程序组件）的输入/输出属性来触发子组件（测试组件）的 ngOnChanges。但是，我无法通过更改子组件中的双向绑定属性来触发父组件的 ngOnChanges。

工作 Plunker 可以在这里找到：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);
  }
}

【问题讨论】：

标签： angular angular2-template angular2-directives two-way-binding

【解决方案1】：

ngOnChanges 仅在父组件为组件的输入传递不同的值时调用。您不应该期望调用父组件的 ngOnChanges 方法，因为它没有任何输入，也没有任何父组件。

【讨论】：

【解决方案2】：

你做不到

“我无法通过更改来触发父组件的 ngOnChanges 子组件中的双向绑定属性"

您只能检测到从父级到子级，如果您想将更改的值或事件从子级传递给父级，则必须使用 @Outpput 或 EventTrigger via Service

【讨论】：

但是由于父组件的 twoWaySend 是从子组件更改中更新的，您不认为应该有一个事件来捕获该更改吗？
@jitenagarwal19 ，是的，有一种方法可以捕获它，但不能通过 ngOnChanges。您可以使用“@Outpput”或“EventTrigger via Service”来做到这一点
如果你能 fork plunkr 并演示它，那将是非常有帮助的。
对不起@jitenagarwal19，现在不是需要时间，我稍后可以帮助你，但这个问题的答案是否定的，你不能以特定方式做到这一点。

【解决方案3】：

Angular 文档指出，ngOnChanges 被调用：

当 Angular（重新）设置数据绑定输入属性时

如果您想捕获此更新；

您可以显式使用使用输出/事件绑定，而不是使用[()]。

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

父组件中的输出更改处理程序将是

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

【讨论】：