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对象之内置对象Math使用方法
Apr 16 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
Mar 04 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
Dec 31 Javascript
使用AJAX实现Web页面进度条的实例分享
May 06 Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
Aug 19 Javascript
JavaScript简单下拉菜单特效
Sep 13 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
Nov 25 Javascript
老生常谈js中的MVC
Jul 25 Javascript
AngularJS 中ui-view传参的实例详解
Aug 25 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
May 09 Javascript
原生JS实现微信通讯录
Jun 18 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 simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
thinkPHP导出csv文件及用表格输出excel的方法
2015/12/30 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
js的.innerHTML = ""IE9下显示有错误的解决方法
2013/09/16 Javascript
JS实现div居中示例
2014/04/17 Javascript
使用js实现的简单拖拽效果
2015/03/18 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
2016/05/16 Javascript
JS遍历页面所有对象属性及实现方法
2016/08/01 Javascript
vue事件修饰符和按键修饰符用法总结
2017/07/25 Javascript
js弹性势能动画之抛物线运动实例详解
2017/07/27 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
vue兄弟组件传递数据的实例
2018/09/06 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
jQuery表单选择器用法详解
2019/08/22 jQuery
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
python 3.7.0 下pillow安装方法
2018/08/27 Python
Python实现的爬取小说爬虫功能示例
2019/03/30 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
HTML5中Canvas与SVG的画图原理比较
2013/01/16 HTML / CSS
高中毕业生自我鉴定范文
2013/09/26 职场文书
大学生演讲稿范文
2014/01/11 职场文书
优秀教师演讲稿
2014/05/06 职场文书
党支部遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
中学生打架检讨书
2014/10/13 职场文书
2014年作风建设工作总结
2014/10/29 职场文书
企业整改报告范文
2014/11/08 职场文书
计算机专业自荐信
2015/03/05 职场文书
就业推荐表院系意见
2015/06/05 职场文书