Двусторонняя привязка компонентов Angular 2 не вызывает родительский ngOnChange

Я создал здесь плункер:

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 родительского элемента вызывается только один раз.

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

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


angular data-binding ngonchanges
person Scottie    schedule 15.07.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

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

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

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

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

Plunker

person Mark Rajcok    schedule 15.07.2016
comment
@Scottie, ну, иногда вы просто хотите, чтобы родительский элемент (например, родительский вид) обновлялся, и вам не нужно получать уведомления, потому что вам не нужно выполнять какую-либо логику, когда дочерний элемент вносит изменения. И вы правы, события, генерируемые EventEmitter, не всплывают. Если вы хотите, чтобы несколько компонентов получали уведомление об одном изменении, рекомендуется использовать Observable или Subject в общей службе. - person Mark Rajcok; 16.07.2016