Question

我有一个输入，它是一个javaScript对象。当它改变时，ngOnChange没有被触发。我尝试了一个数字输入，它工作正常。

onTextChanged()

家长html

export class ResultsComponent implements OnInit, OnChanges {

  @Input() SearchParams: {
    HouseSelected : Boolean,
    ApartementSelected : Boolean,
    ShopSelected : Boolean,
    KolangiSelected : Boolean,
    BusinessSelected : Boolean,
    NumOfRooms : String,
    PriceLow: Number,
    PriceHigh: Number,
    //TODO add City
    MeterLow:Number,
    MeterHigh:Number
  };


  constructor() { }

  ngOnInit() {
  }

  ngOnChanges(changes: SimpleChanges){
    console.log(this.SearchParams);
  }
}

收到此输入的孩子是app-results（正如您在HTML中看到的那样） app-results HTML

中没有任何内容

Answer 1

最简单的方法是创建一个全新的对象，然后将其分配给子输入所绑定的属性，例如。

父组件

this.SearchParams = Object.assign({}, NewSearchParams);

你几乎遇到与this question中的海报完全相同的问题。对于那里的答案中的变化检测有一些非常好的见解。

我已经学过这一课很难，几次:) Javascript传递对象作为参考，这就是为什么对它们执行变更检测可能会很棘手。如果您创建一个全新的对象并覆盖前一个对象，它应该触发更改检测。

Answer 2

最好通过传递新对象来触发更改检测。对于要在对象上触发的更改检测，引用应更改为更改创建新对象所需的引用。您可以使用es7语法快捷方式

object = {
   ...object,
   changeParameter: parameter
 }

你应该改变一点功能

ngOnChanges(changes: SimpleChanges){
console.log(changes)
if (changes.SearchParams) {
 this.SearchParams = changes.SearchParams.currentValue
 console.log(this.SearchParams)
 }
}

Answer 3

尝试的另一个选择是实现ngDoCheck而不是ngOnChanges并编写自己的更改响应行为，请参阅参考：https://angular.io/guide/lifecycle-hooks#docheck

对于JavaScript对象输入，不会触发ngOnChange

3 个答案: