angular5 子組件監(jiān)聽父組件傳入值的變化方法
更新時間：2018年09月30日 09:44:30 作者：strong90
今天小編就為大家分享一篇angular5 子組件監(jiān)聽父組件傳入值的變化方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
項目中遇到一個問題，就是在ngInit()中調(diào)用方法，只調(diào)用一次的問題，當(dāng)父組件傳值變化時，并不會再次執(zhí)行。
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 子組件監(jiān)聽父組件傳入值的變化方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇AngularJs返回前一頁面時刷新一次前面頁面的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
Angular?Tree?Shaking優(yōu)化機制原理詳解
這篇文章主要為大家介紹了Angular?Tree?Shaking優(yōu)化機制原理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
AngularJS是一個強大的前端框架,其模塊化架構(gòu)提供了高度的靈活性和可維護性,本文探討了AngularJS中模塊的概念,包括定義、用途及創(chuàng)建和配置方法,感興趣的朋友跟隨小編一起看看吧2024-09-09
下面小編就為大家?guī)硪黄狝ugularJS從入門到實踐(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
本篇文章主要介紹了angularjs實現(xiàn)的前端分頁控件示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要介紹了Angular19 自定義表單控件的相關(guān)資料，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-01-01
這篇文章主要介紹了AngularJS 應(yīng)用模塊化的使用,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
使用Angular material主題定義自己的組件庫的配色體系
這篇文章主要介紹了使用Angular material主題定義自己的組件庫的配色體系的相關(guān)知識，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了angular 組件通信的幾種實現(xiàn)方式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了Angularjs驗證用戶輸入的字符串是否為日期時間,需要的朋友可以參考下2017-06-06