How to refresh a page or refresh ngOnInit() in ionic 2

Question

i'm wondering if there is a way to refresh the ngOnInit() function or refresh the component. i don't wanna use the pull to refresh method. i want to do it on button click or tap. Thank you

home.ts file

  checkNetwork() {
  console.log("check internet");
this.platform.ready().then(() => {
  if(this.network.type == "none"){
    this.shouldHide = false;
    this.dividerHide = true;
  }
    let alert = this.alertCtrl.create({
        title: "Connection Status",
        subTitle: <string> this.network.type,
        buttons: ["OK"]
    });
  alert.present();
});
}

home.html file

<ion-card [hidden]="shouldHide">
<ion-card-header>
  <img src="img/sad.png" />
</ion-card-header>
<ion-card-content>
  <ion-card-title style="text-align:center">
    No INTERNET!
  </ion-card-title>
  <button ion-button full (click)="refreshPage($event)">Retry</button>
</ion-card-content>

when the connection will be available i want the page to refresh

Answer 1

Thank you all, this is how i managed it

home.ts file

ngOnInit(){
 this.LoadData();}


checkNetwork() {
  console.log("check internet");
this.platform.ready().then(() => {
  if(this.network.type == "none"){
    this.shouldHide = false;
    this.dividerHide = true;
  }else{
    this.shouldHide = true;
    this.dividerHide = false;
    this.presentLoading()
  }
});
}

refreshPage()
  {this.LoadData();
}

public LoadData(){...}

Home.html file

<ion-card [hidden]="shouldHide">
<ion-card-header>
  <img src="img/sad.png" />
</ion-card-header>
<ion-card-content>
  <ion-card-title style="text-align:center">
    Pas de connexion internet!
  </ion-card-title>
  <button ion-button full (click)="refreshPage()">Reessayer</button>
</ion-card-content>

Answer 2

Use this code

refreshPage() {
   this.navCtrl.setRoot(this.navCtrl.getActive().component);
}

Answer 3

你可以通过调用ngOnInit（）来重新初始化页面：this.ngOnInit（）;

Answer 4

My workaround for this was to present a toast (ToastController). Toast shows, toast disappears, then angular refreshes the data like it's supposed to. Toast can say "Refreshing data" or whatever is relevant for you -- in my case "New message from blah@blah". Or perhaps only show the toast for 1 ms if you don't want to clutter the UI.

Doing this.navCtrl.setRoot(this.navCtrl.getActive().component); "works" but has the side effect of totally reseting the nav stack, which is usually totally unacceptable.

Answer 5

You may need to refactor your code structure that so it doesn't need the page refresh, using an init method or Rx's subscriptions.

In case if you need the page reload, why don't you use reload method?

 window.location.reload(); 

Edited:

Are you using network.onConnect subscription?

 // watch network for a connection let connectSubscription = this.network.onConnect().subscribe(() => { console.log('network connected!'); // We just got a connection but we need to wait briefly // before we determine the connection type. Might need to wait // prior to doing any api requests as well. setTimeout(() => { if (this.network.type === 'wifi') { console.log('we got a wifi connection, woohoo!'); } }, 3000); });