angular5 子组件监听父组件传入值的变化方法


Posted in Javascript onSeptember 30, 2018

项目中遇到一个问题,就是在ngInit()中调用方法,只调用一次的问题,当父组件传值变化时,并不会再次执行。

import {
Component,
Input,
OnChanges,
SimpleChanges
} from '@angular/core';
import {
NavController
} from 'ionic-angular';
 
@Component({
selector: 'cs-img-lazy',
templateUrl: 'cs-img-lazy.html'
})
export class CsImgLazyComponent implements OnChanges {
 
@Input() default: string; 
@Input() src: string 
 
constructor(public navCtrl: NavController) {
 
}
 
ngOnInit() {
}
 
ngOnChanges(changes: SimpleChanges) {
 console.log('ngOnChanges', this.src);
 this.loadImage(this.src, () => {
  this.default = this.src;
 });
}
 
loadImage(url, callback) {
var img = new Image();
img.onload = () => {
if (img.complete) {
img.onload = null
callback(img);
return;
}
}
img.src = url;
}

}

以上这篇angular5 子组件监听父组件传入值的变化方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery Dialog的内存泄露问题解决方法
Jun 18 Javascript
jquery事件preventDefault()方法用法实例
Jan 16 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
May 06 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
js实现精确到秒的倒计时效果
May 29 Javascript
angular2+node.js express打包部署的实战
Jul 27 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 Javascript
react native与webview通信的示例代码
Sep 25 Javascript
原生js实现日期选择插件
May 21 Javascript
使用Vant完成Dialog弹框案例
Nov 11 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 #Javascript
angularjs1.5 组件内用函数向外传值的实例
Sep 30 #Javascript
angular2 组件之间通过service互相传递的实例
Sep 30 #Javascript
详解如何webpack使用DllPlugin
Sep 30 #Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
Sep 30 #Javascript
vue-router 手势滑动触发返回功能
Sep 30 #Javascript
Vue CLI3 开启gzip压缩文件的方式
Sep 30 #Javascript
You might like
PHP 错误之引号中使用变量
2009/05/04 PHP
微博短链接算法php版本实现代码
2012/09/15 PHP
十幅图告诉你什么是PHP引用
2015/02/22 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
PHP静态成员变量
2017/02/14 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
Jquery easyUI 更新行示例
2014/03/06 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
Javascript实现鼠标框选操作  不是点击选取
2016/04/14 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
Vue2.0点击切换类名改变样式的方法
2018/08/22 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
jQuery实现带进度条的轮播图
2020/09/13 jQuery
python递归查询菜单并转换成json实例
2017/03/27 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
python 多线程串行和并行的实例
2019/02/22 Python
提升python处理速度原理及方法实例
2019/12/25 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
django rest framework serializers序列化实例
2020/05/13 Python
悬挂训练绳:TRX
2017/12/14 全球购物
联想香港官方网站及网店:Lenovo香港
2018/04/13 全球购物
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
大学四年学习的自我评价分享
2013/12/09 职场文书
内容编辑个人求职信
2013/12/10 职场文书
失业者真诚求职信范文
2013/12/25 职场文书
教师党性分析材料
2014/02/04 职场文书
父亲的菜园教学反思
2014/02/13 职场文书
《愚公移山》教学反思
2014/02/20 职场文书
《金子》教学反思
2014/04/13 职场文书
大学生求职信范文
2014/05/24 职场文书
应届生求职信范文
2014/06/30 职场文书
迎国庆演讲稿
2014/09/15 职场文书