【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.52php.cn/article/p-msffnobv-d.html
https://segmentfault.com/q/1010000008965321

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!