【Angular2】组件交互异步问题

问题

父组件通过服务调取后台接口获取数据
子组件@Input变量是父组件获取数据中的一个数据
由于子组件在渲染的时候，父组件的数据还没有获取到，所以会出现问题

 

方法1

使用setTimeout函数

setTimeout(() => { this.diff = this.examTimeLength * 60; }, 300);

这种方法实现了功能，但是不太可取，因为后台返回的数据可能会更慢，300ms内一旦没有返回，这条代码走过去程序就会一直报错

 

方法2

使用ngOnChanges监测变量的变化

  ngOnChanges(changes: SimpleChanges) {    if(changes['examTimeLength']&&this.examTimeLength) {      // console.log("changes---"+changes['examTimeLength'].currentValue);      this.diff = this.examTimeLength * 60;    }  }

如果监测到了输入变量的变化，同时里面是有值得话（会有两次变化，第一次没有值），可以进行自己的代码逻辑

 

小结

组件交互需要我们了解，组件的生命周期，异步问题，以及相关知识点
在Angular的这些规范下，实现自己想要的功能

 

参考资料：
https://segmentfault.com/a/1190000008759314
https://segmentfault.com/q/1010000008965321