Question

我在一个盒子里有一个自定义实现的香蕉，从父母到孩子。不知何故，该属性在父级和子级中都可以正常更新，但是我无法抓住父级中此属性更改的时刻。我需要这一刻，因为我想对此做些事情。我该怎么做？这是父母的一些代码：

<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()永远不会被触发，尽管我正在子级组件中更改此方法（在浏览器中使用子级组件时更改）。

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

他们都被父母抓住了，如下所示：

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

子级更改其双向绑定属性后，父级属性更改检测

2 个答案: