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 相关文章推荐
获取URL地址中的文件名和参数的javascript代码
Sep 02 Javascript
几个javascript操作word的参考代码
Oct 26 Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
js实现双击图片放大单击缩小的方法
Feb 17 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 Javascript
js中跨域方法原理详解
Jul 19 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
vue注册组件的几种方式总结
Mar 08 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 Javascript
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
小程序视频或音频自定义可拖拽进度条的示例代码
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页面间参数传递的四种方法详解
2013/06/09 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
关于JavaScript中var声明变量作用域的推断
2010/12/16 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
JS实现仿京东淘宝竖排二级导航
2014/12/08 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
基于JavaScript实现定时跳转到指定页面
2016/01/01 Javascript
JavaScript学习笔记整理_关于表达式和语句
2016/09/19 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
Django获取应用下的所有models的例子
2019/08/30 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
CSS3的一个简单导航栏实现
2015/08/03 HTML / CSS
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
教育专业个人求职信
2013/12/02 职场文书
《陶罐和铁罐》教学反思
2014/02/19 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
人事代理委托书
2014/09/27 职场文书
2015年中个人总结范文
2015/03/10 职场文书
员工自我评价范文
2015/03/11 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
表扬信范文
2015/05/04 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS
python中pycryto实现数据加密
2022/04/29 Python
SQL中的连接查询详解
2022/06/21 SQL Server