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的树型插件(OrangeTree)使用介绍
May 03 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 Javascript
node.js中的console用法总结
Dec 15 Javascript
浅谈类似于(function(){}).call()的js语句
Mar 30 Javascript
JavaScript动态插入CSS的方法
Dec 10 Javascript
JS上传组件FileUpload自定义模板的使用方法
May 10 Javascript
jquery-mobile表单的创建方法详解
Nov 23 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
node.js中cluster的使用教程
Jun 09 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
Dec 23 Javascript
Vue自定义指令封装节流函数的方法示例
Jul 09 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
May 01 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调用google接口生成二维码示例
2014/04/28 PHP
在Mac OS上编译安装Nginx+PHP+MariaDB开发环境的教程
2016/02/23 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
prototype 1.5 & scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
调用jQuery滑出效果时闪烁的解决方法
2014/03/27 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
JavaScript限定图片显示大小的方法
2015/03/11 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
vue中使用props传值的方法
2019/05/08 Javascript
js实现列表按字母排序
2020/08/11 Javascript
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
浅谈python下tiff图像的读取和保存方法
2018/12/04 Python
python  logging日志打印过程解析
2019/10/22 Python
python实现双色球随机选号
2020/01/01 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
Python中的Cookie模块如何使用
2020/06/04 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
请用用Java代码写一个堆栈
2012/01/26 面试题
数学教学随笔感言
2014/02/17 职场文书
2014年冬季防火方案
2014/05/21 职场文书
售后客服工作职责
2014/06/16 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
2016党员读书思廉心得体会
2016/01/23 职场文书
同学聚会开幕词
2019/04/02 职场文书
python编写五子棋游戏
2021/05/25 Python
Java中使用Filter过滤器的方法
2021/06/28 Java/Android