Question

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

可以在此处找到Working 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);
  }
}

Answer 1

仅当父组件为组件的输入传递不同的值时，才会调用

ngOnChanges。您不应该期望调用父组件的ngOnChanges方法，因为它没有任何输入，也没有任何父组件。

Answer 2

只是你不能

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

你只能从父母到孩子检测到这一点，如果你想将改变的值或事件从孩子传递给父母，你必须使用@Outpput或EventTrigger via Service

Answer 3

Angular文档指出，ngOnChanges被称为：

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

如果您想捕获此更新;

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

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

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

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

双向绑定如何在Angular 2中起作用？

3 个答案: