首页 文章

Angular 2双向组件绑定不会调用父ngOnChange

提问于
浏览 次
1

我在这里创建了一个plunker：

http://plnkr.co/edit/8bwqkYQ6tqrpGwHT588y?p=preview

这表明了这个问题 .

基本上，我有2个组件 . 第一个组件具有属性与子组件的双向绑定 .

我的父组件是：

import { Component, Input, Output, EventEmitter } from '@angular/core'
import { ChildComponent } from "./childComponent"

@Component({
    selector: 'parentComponent',
    template: `
    <div>
      <a href="#" (click)="selectedId = 0">Reset</a><br>
      <div>Parent SelectedId: {{selectedId}}</div>
      <childComponent [(selectedId)]="selectedId"></childComponent>
    </div>
  `,
  directives: [ChildComponent]
})

export class ParentComponent {
  @Input() selectedId: number;

    ngOnChanges(changes) {
      console.log("Parent changes called!");
    }
}

和我的孩子组成部分：

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

@Component({
    selector: 'childComponent',
    template: `
    <div>
      <div>Child SelectedId: {{selectedId}}</div> 
    </div>
  `,
  directives: []
})

export class ChildComponent {
  @Input() selectedId: number;
  @Output() selectedIdChange: EventEmitter<number> = new EventEmitter<number>();

    constructor() {
      setTimeout(() => {
        this.selectedId = 100;
        this.selectedIdChange.emit(this.selectedId);
       }, 2000);
    }

    ngOnChanges(changes) {
      console.log("Child changes called!");
    }
}

在子节点中，我设置超时以在2秒后以编程方式更改selectedId的值，然后将值发回给父节点 .

这一切都很有效，除了一件事......父母的ngOnChange只被调用一次 .

我认为父母非常想知道孩子是否改变了 Value ，或者双向约束是什么意思？

我在这里错过了什么？

data-binding angular ngonchanges

1 回答

  • 2

    仅当App的 selectedId 更改时才会调用父级的ngOnChange，因为绑定了's what ParentComponent'的输入属性 .

    如果您希望通知父级在子级中所做的更改，请绑定到 xChange 事件（其中 x 是输入属性的名称） - 即，拆分属性和事件绑定：

    <childComponent [selectedId]="selectedId" (selectedIdChange)="changed($event)"></childComponent>

    changed(newValue) {
  console.log('newValue', newValue);
  this.selectedId = newValue;
}

    Plunker

    回复于

相关问题