ionic3关于页面返回时刷新segment中的子组件数据的方法

思路:

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函数,从而完成数据刷新。

你可能感兴趣的:(ionic3关于页面返回时刷新segment中的子组件数据的方法)