Parent 属性在 child 更改其 two-way-bound 属性后更改检测

Question

我有一个盒子里的定制香蕉，从 parent 到 child。 parent 和 child 中的属性都以某种方式得到了很好的更新，但是我无法捕捉到属性在 parent 中发生变化的时刻。我需要这一刻，因为我想做点什么。我该怎么做？这是来自 parent 的一些代码：

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

来自 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)（child 的事件），因此，处理程序方法 countriesListChanged()（parent 的）永远不会被触发，尽管我正在 child 组件中更改它（它在使用 child 组件期间更改浏览器）。

Answer 1

试试这个，小老派

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)
}

Answer 2

我不确定你是想在父级中捕获对 countriesList 的更改还是在子级中捕获对 optionList 的更改，因此我创建了一个处理这两种情况的演示。

您可以在此处查看实际效果 https://stackblitz.com/edit/angular-svbvh1

在 child.ts

中传播给父项的子项所做的更改如下

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

来自父项的更改在 child.ts

中传播如下

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

他们都被parent抓到如下

  countriesListChanged(list: string[]) {
    console.log("countriesListChanged: ", list);
    console.log("countriesList in parent: ", this.countriesList);
  }

Parent 属性在 child 更改其 two-way-bound 属性后更改检测

Parent property change detection after child changes its two-way-bound property

angular

two-way-binding

Parent 属性 在 child 更改其 two-way-bound 属性 后更改检测

Parent property change detection after child changes its two-way-bound property

angular

two-way-binding

Parent 属性在 child 更改其 two-way-bound 属性后更改检测