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 21 Javascript
简单分析javascript中的函数
Sep 10 Javascript
Jquery和Js获得元素标签名称的方法总结
Oct 08 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
Dec 31 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
JS二叉树的简单实现方法示例
Apr 05 Javascript
jQuery实现拖动效果的实例代码
Jun 25 jQuery
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
js实现方块上下左右移动效果
Aug 17 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
Dec 20 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 Javascript
解决vue-router路由拦截造成死循环问题
Aug 05 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
论建造顺序的重要性
2020/03/04 星际争霸
杏林同学录(一)
2006/10/09 PHP
在PHP中使用curl_init函数的说明
2010/11/02 PHP
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
php中将数组转成字符串并保存到数据库中的函数代码
2013/09/29 PHP
php使用fgetcsv读取csv文件出现乱码的解决方法
2014/11/08 PHP
PHP合并静态文件详解
2014/11/14 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
Symfony2中被遗弃的getRequest()方法分析
2016/03/17 PHP
Prototype Object对象 学习
2009/07/12 Javascript
关于文本框的一些限制控制总结~~
2010/04/15 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
2012/08/14 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
2014/01/10 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
微信小程序canvas分享海报功能
2019/10/31 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
VSCode下好用的Python插件及配置
2018/04/06 Python
scrapy-redis分布式爬虫的搭建过程(理论篇)
2020/09/29 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
新西兰航空中国官网:Air New Zealand China
2018/07/24 全球购物
通信工程专业毕业生推荐信
2013/12/25 职场文书
销售主管的自我评价分享
2014/01/03 职场文书
自我评价是什么
2014/01/04 职场文书
运动会领导邀请函
2014/02/05 职场文书
改革共识倡议书
2014/08/29 职场文书
三方股东合作协议书范本
2014/09/28 职场文书
设备收款委托书范本
2014/10/02 职场文书
整改报告怎么写
2014/11/06 职场文书
付款承诺函范文
2015/01/21 职场文书
Mysql 一主多从的部署
2022/05/20 MySQL
SQL SERVER中的流程控制语句
2022/05/25 SQL Server