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 相关文章推荐
提高 DHTML 页面性能
Dec 25 Javascript
javascript 文章截取部分无损html显示实现代码
May 04 Javascript
js获取当前日期代码适用于网页头部
Jun 27 Javascript
在JavaScript中操作时间之getMonth()方法的使用
Jun 10 Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 Javascript
AngularJS辅助库browserTrigger用法示例
Nov 03 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
浅谈Vue.js
Mar 02 Javascript
Vue.js实现移动端短信验证码功能
Mar 29 Javascript
Vue如何实现组件的源码解析
Jun 08 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 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下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
php程序的国际化实现方法(利用gettext)
2011/08/14 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
2016/03/12 Javascript
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
小程序ios音频播放没声音问题的解决
2018/07/11 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
在webstorm中配置less的方法详解
2020/09/25 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
Python 模板引擎的注入问题分析
2017/01/01 Python
Python基于回溯法子集树模板解决m着色问题示例
2017/09/07 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
pandas值替换方法
2018/07/10 Python
python的继承知识点总结
2018/12/10 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
简单的辞职信范文
2014/01/18 职场文书
幼儿园实习生辞职信
2014/01/20 职场文书
财务审计整改报告
2014/11/06 职场文书
少年雷锋观后感
2015/06/10 职场文书
小学副班长竞选稿
2015/11/21 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis
Win11 引入 Windows 365 云操作系统,适应疫情期间混合办公模式:启动时直接登录、模
2022/04/06 数码科技