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 相关文章推荐
用js判断用户浏览器是否是XP SP2的IE6
Mar 08 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
Jul 08 Javascript
js Map List 遍历使用示例
Jul 10 Javascript
通过复制Table生成word和excel的javascript代码
Jan 20 Javascript
关于JS数组追加数组采用push.apply的问题
Jun 09 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 Javascript
JS+CSS实现DIV层的展开、收缩效果
Jan 28 Javascript
javacript获取当前屏幕大小
Jun 04 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
浅析Vue中method与computed的区别
Mar 06 Javascript
vue实现行列转换的一种方法
Aug 06 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
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
php中cookie的使用方法
2014/03/29 PHP
PHP获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
phpmailer绑定邮箱的实现方法
2016/12/01 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
使用PHP+MySql实现微信投票功能实例代码
2017/09/29 PHP
Yii2框架自定义验证规则操作示例
2019/02/08 PHP
javascript 显示当前系统时间代码
2009/12/28 Javascript
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
JavaScript防止全局变量污染的方法总结
2018/08/02 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
小程序如何定位所在城市及发起周边搜索
2020/02/11 Javascript
react基本安装与测试示例
2020/04/27 Javascript
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
Python自定义函数计算给定日期是该年第几天的方法示例
2019/05/30 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
python爬虫添加请求头代码实例
2019/12/28 Python
关于Keras Dense层整理
2020/05/21 Python
哪些是python中web开发框架
2020/06/17 Python
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
EMU Australia澳大利亚官网:澳大利亚本土雪地靴品牌
2019/07/24 全球购物
年会搞笑主持词
2014/03/27 职场文书
管理工程专业求职信
2014/08/10 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
收入证明怎么写
2015/06/12 职场文书
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android