【Angular2】组件交互异步问题

大佬教程收集整理的这篇文章主要介绍了【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的这些规范下，实现自己想要的功能

参考资料：
http://code.js-code.com/article/p-msffnobv-d.html
https://segmentfault.com/q/1010000008965321

大佬总结

以上是大佬教程为你收集整理的【Angular2】组件交互异步问题全部内容，希望文章能够帮你解决【Angular2】组件交互异步问题所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。