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/Css 文件的代码
Jul 03 Javascript
jquery实现文字由下到上循环滚动的实例代码
Aug 09 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
JavaScript制作简单的日历效果
Mar 10 Javascript
jquery动态切换背景图片的简单实现方法
May 14 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 Javascript
node实现的爬虫功能示例
May 04 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
Jan 08 Javascript
Vue全局loading及错误提示的思路与实现
Aug 09 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 Javascript
Vue的列表之渲染,排序,过滤详解
Feb 24 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的ob_start();控制您的浏览器cache!
2006/11/25 PHP
php短域名转换为实际域名函数
2011/01/17 PHP
PHP漏洞全解(详细介绍)
2012/11/13 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
js获得鼠标的坐标值的方法
2013/03/13 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
OpenLayer学习之自定义测量控件
2020/09/28 Javascript
Python的另外几种语言实现
2015/01/29 Python
利用Python中的mock库对Python代码进行模拟测试
2015/04/16 Python
tensorflow实现softma识别MNIST
2018/03/12 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
matplotlib实现显示伪彩色图像及色度条
2019/12/07 Python
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
Fossil美国官网:化石手表、手袋、首饰及配饰
2019/02/17 全球购物
Linux开机引导的步骤是什么
2014/02/26 面试题
如何获得EntityManager
2014/02/09 面试题
在校生党员自我评价
2013/09/25 职场文书
户外亲子活动策划方案
2014/02/07 职场文书
啤酒节策划方案
2014/05/28 职场文书
主要负责人任命书
2014/06/06 职场文书
2014年林业工作总结
2014/12/05 职场文书
Win10系统下配置Java环境变量
2021/06/13 Java/Android
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL