Обнаружение изменения родительского свойства после изменения дочерним свойством - PullRequest
Новая
       9

Обнаружение изменения родительского свойства после изменения дочерним свойством

0 голосов
/ 21 июня 2019

У меня есть индивидуально реализованный банан в коробке, от родителя до ребенка.Каким-то образом свойства корректно обновляются как в родительском, так и в дочернем процессах, но я не могу уловить момент, когда это свойство изменяется в родительском.Мне нужен этот момент, потому что я хочу что-то сделать с ним.Как мне это сделать?Вот некоторый код от родителя: 

<child
    [(optionList)]="countriesList"
    (optionListChange)="countriesListChanged()">
</child>

От дочернего элемента: 

    _optionList: Array<CustomSelectOption> = [];

    @Output()
    optionListChange = new EventEmitter<CustomSelectOption[]>();

    @Input()
    get optionList() {
        return this._optionList;
    }
    set optionList(val) {
        this._optionList = val;
        this.optionListChange.emit(this._optionList);
    }

Итак, (optionListChange) (дочернее событие) и, следовательно, метод обработчика countriesListChanged() (изparent) никогда не срабатывает, хотя я изменяю это в дочернем компоненте (он изменяется во время использования дочернего компонента в браузере).

Ответы [ 2 ]

0 голосов
/ 21 июня 2019

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

вы можете увидеть его в действии здесь https://stackblitz.com/edit/angular-svbvh1

изменения, сделанные в child, распространяются на parent следующим образом в child.ts 

  addCountry() {
    this.optionList.push("child-added-country" + (this.optionList.length + 1));
    this.optionListChange.emit(this.optionList);
  }

изменения, исходящие от parent, распространяются следующим образом в child.ts 

  ngOnChanges(changes: SimpleChanges) {
    if (changes.optionList) {
      this.optionListChange.emit(changes.optionList.currentValue);
    }
  }

и они оба пойманы в родителя следующим образом 

  countriesListChanged(list: string[]) {
    console.log("countriesListChanged: ", list);
    console.log("countriesList in parent: ", this.countriesList);
  }
0 голосов
/ 21 июня 2019

Попробуйте, маленькая старая школа

parent.html 

<child
    [optionList]="countriesList"
    (optionListChange)="countriesListChanged($event)">
</child>

child.ts 

@Output()
optionListChange = new EventEmitter<CustomSelectOption[]>();

@Input() optionList: CustomSelectOption[];

ngOnInit() {
    console.log(this.optionList); // list coming from parent
}

// list changed by the child, letting know the parent
changeOptionList(val: CustomSelectOption[]) {
    this.optionList = val;
    this.optionListChange.emit(this.optionList);
}

parent.ts 

countriesListChanged(event: CustomSelectOption[]) {
    console.log('coming from child', event)
}
...