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 相关文章推荐
PJBlog插件 防刷新的在线播放器
Oct 25 Javascript
javascript引用对象的方法
Jan 11 Javascript
Jquery 学习笔记(一)
Oct 13 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
Jan 17 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
Javascript中document.referrer隐藏来源的方法
Jan 16 Javascript
angularjs $http实现form表单提交示例
Jun 09 Javascript
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 Javascript
微信小程序从注册账号到上架(图文详解)
Jul 17 Javascript
vue element自定义表单验证请求后端接口验证
Dec 11 Javascript
JavaScrip如果基于url实现图片下载
Jul 03 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
Nov 07 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编写的导航条程序
2006/10/09 PHP
PHP5中使用PDO连接数据库的方法
2010/08/01 PHP
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
PHP对文件夹递归执行chmod命令的方法
2015/06/19 PHP
php字符串过滤strip_tags()函数用法实例分析
2019/06/24 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
让人印象深刻的10个jQuery手风琴效果应用
2012/05/08 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
Javascript基础之数组的使用
2016/05/13 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
python requests 使用快速入门
2017/08/31 Python
itchat-python搭建微信机器人(附示例)
2019/06/11 Python
Python3网络爬虫中的requests高级用法详解
2019/06/18 Python
PyTorch中的Variable变量详解
2020/01/07 Python
Python3.7安装pyaudio教程解析
2020/07/24 Python
如何通过python计算圆周率PI
2020/11/11 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
什么是组件架构
2016/05/15 面试题
两道JAVA笔试题
2016/09/14 面试题
普通简短的个人自我评价
2014/02/15 职场文书
读群众路线心得体会
2014/03/07 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
酒店温馨提示语
2015/07/14 职场文书