问题
父组件通过服务调取后台接口获取数据
子组件@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