思路:
1、ionic3中已知存在页面的生命周期函数,也可以找到ionic3中组件的相关生命周期函数。
2、父子组件通信的方法
资料收集:
1、angular2中组件的相关周期函数如下:
- ngOnChanges:在ngOnInit之前,当数据绑定输入属性的值发生变化时。
- ngOnInit:在第一次ngOnChanges之后。
- ngDoCheck:每次Angular变化检测时。
- ngAfterContentInit:在外部内容放到组件内之后。
- ngAfterContentChecked:在放到组件内的外部内容每次检查之后。
- ngAfterViewInit:在初始化组件视图和子视图之后。
- ngAfterViewChecked:在子组件视图和子视图检查之后。
- ngOnDestroy:在Angular销毁组件/指令之前。
备注:(ngOnChanges与ngDoCheck存在互斥,尽量不要同时出现)
2、Ionic2中NavController模块的生命周期如下:
无返回值事件:
- ionViewDidLoad:当页面加载完毕时触发。它只会在新页面被创建时触发一次,如页面被缓存再一次触发,它不会有任何反应。
- ionViewWillEnter:当页面即将加载时会触发。
- ionViewDidEnter:它的触发和ionViewDidLoad的区别在于,不管是第一次加载还是缓存加载它都会触发
- ionViewWillLeave:当前页面即将离场时触发。
- ionViewDidLeave:当前页面完全离场时触发。
- ionViewWillUnload:当前页面即销毁时触发。
有返回值事件:
- ionViewCanEnter:在一个需要授权的页面进入之前,它会触发。用于检查当前用户的资格。
- ionViewCanLeave:在一个需要授权的页面离开之前,它会触发。用于检查当前用户的资格。
3、把子组件的数据绑定函数
因为需要经常调用子组件的数据绑定函数,所以将数据绑定函数写在ngOnInit()中。
ngOnInit(){
// 数据绑定函数
this.getCourses();
}
4、angular2中父子组件的通信方式:
在父组件ts页面中引入ViewChild,并在父类中进行声明子组件变量,并在父组件的ionViewWillEnter()中使用变量调用子组件中的函数。
import { ViewChild } from '@angular/core';
export class TeachMainPage {
@ViewChild(Courseware) child_courseware:any;
...
ionViewWillEnter(){
this.child_courseware.ngOnInit();
}
}
完成:
页面加载时,父组件会调用ionViewWillEnter()对子组件进行加载。
返回到页面时,也会触发ionViewWillEnter()函数,同时也通过调用触发子组件的ngOnInit函数,从而完成数据刷新。