【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://www.jb51.cc/article/p-msffnobv-d.html
https://segmentfault.com/q/1010000008965321

原文链接:https://www.f2er.com/angularjs/146144.html

猜你在找的Angularjs相关文章