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 相关文章推荐
javascript 模拟JQuery的Ready方法实现并出现的问题
Dec 06 Javascript
ModelDialog JavaScript模态对话框类代码
Apr 17 Javascript
通过js来制作复选框的全选和不选效果
May 22 Javascript
jquery 为a标签绑定click事件示例代码
Jun 23 Javascript
node.js中的url.parse方法使用说明
Dec 10 Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
浅谈angular.js跨域post解决方案
Aug 30 Javascript
微信小程序实现下载进度条的方法
Dec 08 Javascript
Angular设置别名alias的方法
Nov 08 Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 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
php4的彩蛋
2006/10/09 PHP
php 图片上添加透明度渐变的效果
2009/06/29 PHP
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
php目录拷贝实现方法
2015/07/10 PHP
用js怎么把&字符换成"&amp:"
2006/10/19 Javascript
改版了网上的一个js操作userdata
2007/04/27 Javascript
JS实现随机化快速排序的实例代码
2013/08/01 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
2015/08/31 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
深入理解AngularJS中的ng-bind-html指令
2017/03/27 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
Python模拟简单电梯调度算法示例
2018/08/20 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
Python的形参和实参使用方式
2019/12/24 Python
python如何写try语句
2020/07/14 Python
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
中专毕业自我鉴定
2013/10/16 职场文书
电子商务个人职业生涯规划范文
2014/02/12 职场文书
进步之星获奖感言
2014/02/22 职场文书
护理专业自荐信范文
2014/02/26 职场文书
竞聘书怎么写,如何写?
2014/03/31 职场文书
北京奥运会口号
2014/06/21 职场文书
六一儿童节活动总结
2014/08/27 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书
家庭贫困证明
2015/06/16 职场文书
运动会通讯稿300字
2015/07/20 职场文书
FP-growth算法发现频繁项集——构建FP树
2021/06/24 Python
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis