【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