Угловое 2 двухсторонний компонент связывания не вызывает родителю ngOnChange

Question

Я создал 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!"); 
    } 
} 

В детстве я поставил тайм-аут, чтобы изменить значение selectedId программно через 2 секунды, а затем излучать значение возвращается к родительскому.

Все это прекрасно работает, за исключением одного ... ngOnChange родителя вызывается только один раз.

Я бы подумал, что родитель очень хотел бы знать, изменил ли ребенок его значение, или что такое точка двусторонней привязки?

Что мне здесь не хватает?

Answer 1

ngOnChange родителя будет вызываться только в том случае, если приложение selectedId изменилось, так как это свойство привязано к исходному свойству ParentComponent.

Если вы хотите, родитель, чтобы получать уведомления об изменениях, внесенных в ребенке, связываются с xChange события (где x это имя свойства входного сигнала) – т.е. разбивают недвижимости и событий привязок:

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

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

Plunker