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 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 Javascript
iframe跨域通信封装详解
Aug 11 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
JS日期加减,日期运算代码
Nov 05 Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
JavaScript oncopy事件用法实例解析
May 13 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 Javascript
探索浏览器页面关闭window.close()的使用详解
Aug 21 Javascript
js实现碰撞检测
Jan 29 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中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
javascript 面向对象思想 附源码
2009/07/07 Javascript
深入领悟JavaScript中的面向对象
2013/11/18 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
JS批量修改PS中图层名称的方法
2014/01/26 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
利用js实现禁止复制文本信息
2015/06/03 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
HTML5 canvas 9绘制图片实例详解
2016/09/06 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
Bootstrap基本组件学习笔记之导航(10)
2016/12/07 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
2019/04/28 Javascript
深入学习JavaScript 高阶函数
2019/06/11 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
layui 解决form表单点击无反应的问题
2019/10/25 Javascript
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
python的绘图工具matplotlib使用实例
2014/07/03 Python
在Django框架中编写Contact表单的教程
2015/07/17 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
在css3中background-clip属性与background-origin属性的用法介绍
2012/11/13 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
墨西哥网上购物:Linio墨西哥
2016/10/20 全球购物
如果NULL定义成#define NULL((char *)0)难道不就可以向函数传入不加转换的NULL了吗
2012/02/15 面试题
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
交通事故协议书
2014/04/15 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
结婚通知短信怎么写
2015/04/17 职场文书
女人创业励志语录,句句蕴含能量,激发你的潜能
2019/08/20 职场文书
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS
Nginx报404错误的详细解决方法
2022/07/23 Servers