首页 文章

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

提问于
浏览 次
1

我试图在我的两个组件（父组件和子组件）之间使用双向绑定，并尝试在两个组件的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);
  }
}
angular angular2-template angular2-directives two-way-binding

3 回答

  • 0

    仅当父组件为组件的输入传递不同的值时，才会调用 ngOnChanges . 你不应该调用't expect the parent component' s ngOnChanges 方法，因为它没有任何输入，也没有任何父组件 .

    回复于
  • 0

    简直就是你不能

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

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

    回复于
  • 0

    Angular文档声明， ngOnChanges 被调用：

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

    如果要捕获此更新;

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

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

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

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

相关问题