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 相关文章推荐
xml分页+ajax请求数据源+dom取结果实例代码
Oct 31 Javascript
js 处理URL实用技巧
Nov 23 Javascript
javaScript 页面自动加载事件详解
Feb 10 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
将json转换成struts参数的方法
Nov 08 Javascript
iview给radio按钮组件加点击事件的实例
Sep 30 Javascript
js 两数组去除重复数值的实例
Dec 06 Javascript
security.js实现的RSA加密功能示例
Jun 06 Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 Javascript
ES6中Symbol、Set和Map用法详解
Aug 20 Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 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遍历删除整个目录及文件的方法
2015/03/13 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
2013/07/02 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
jQuery实现的漂亮表单效果代码
2015/08/18 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
Python使用matplotlib实现在坐标系中画一个矩形的方法
2015/05/20 Python
python实现红包裂变算法
2016/02/16 Python
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
python+opencv实现阈值分割
2018/12/26 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
keras 多gpu并行运行案例
2020/06/10 Python
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
工作中个人的自我评价
2013/12/31 职场文书
小学校园活动策划
2014/01/30 职场文书
中秋节超市促销方案
2014/01/30 职场文书
大学社团招新的通讯稿
2014/09/10 职场文书
机关作风建设自查报告
2014/10/22 职场文书
2014年党支部工作总结
2014/11/13 职场文书
2014年个人技术工作总结
2014/12/08 职场文书
初中毕业生感言
2015/07/31 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP
关于mysql中时间日期类型和字符串类型的选择
2021/11/27 MySQL
win10电脑双屏显示一个黑屏怎么办?win10电脑双屏显示一个黑屏解决方法
2022/07/15 数码科技