CODEWITHSUNDEEP
ionic-frameworkionic-viewionic2
Basit
Basit

Reputation: 17214

force view to reload in ionic2 framework

After going through Clear History and Reload Page on Login/Logout Using Ionic Framework

I want to know same question, but for ionic2 using typescript.

On login and logout I need reload the app.ts, because there are classes that run libraries on construct.

it would be basically redirect to home and reload.

Upvotes: 6

Views: 22047

Answers (7)

Jeremy Morant
Jeremy Morant

Reputation: 1

I personally use these three lines to totally refresh a component

let active = this.navCtrl.getActive(); // or getByIndex(int) if you know it
this.navCtrl.remove(active.index);
this.navCtrl.push(active.component);

You can use the ionViewWillLeave() to display your splashscreen while component is reloading and then hide it with ionViewDidEnter() once its loaded.

Hope it helps

Upvotes: 0

S.Yadav
S.Yadav

Reputation: 4509

Here is what worked for me to refresh only current page-

I am trying to call refreshMe function when I call onDelete from my view page,
See how my page.ts file looks- 

 export class MyPage {
    lines of code goes here like 
    public arr1: any;
    public arr2: any;

    public constructor(private nav: NavController, navParams: NavParams) {
      this.nav = nav;

      this.arr1 = [];
      this.arr2 = [];
      // console.log("hey array");
    }  

    onDelete() {
       perform this set of tasks...
       ...
       ...
      refreshMe()
    }


    refreshMe() {
      this.nav.setRoot(MyPage);
    }
}

This is just refreshing only current page.
We can also call this function from view if we need as-- 

<ion-col width-60 offset-30 (click)="refreshMe()">
   ....
   ....
</ion-col>

Upvotes: 0

maudulus
maudulus

Reputation: 11045

Found this answer here, (please note especially the line this.navCtrl.setRoot(this.navCtrl.getActive().component); which is by far the simplest solution that I've come across to reload present page for Ionic 2 & 3 and later versions of Angular (mine is 4), so credit due accordingly:

RELOAD CURRENT PAGE

import { Component } from '@angular/core';
import { NavController, ModalController} from 'ionic-angular';

@Component({
  selector: 'page-example',
  templateUrl: 'example.html'
})
export class ExamplePage {

  public someVar: any;

  constructor(public navCtrl: NavController, private modalCtrl: ModalController) {

  }

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

}

If you want to RELOAD A DIFFERENT PAGE please use the following (note this.navCtrl.setRoot(HomePage);: 

import { Component } from '@angular/core';
import { NavController, ModalController} from 'ionic-angular';
import { HomePage } from'../home/home';

@Component({
  selector: 'page-example',
  templateUrl: 'example.html'
})
export class ExamplePage {

  public someVar: any;

  constructor(public navCtrl: NavController, private modalCtrl: ModalController) {

  }

  directToNewPage() {
    this.navCtrl.setRoot(HomePage);
  }

}

Upvotes: 4

paulitto
paulitto

Reputation: 4673

For ionic 2 it works for me when you force page reload by triggering fireWillEnter on a view controller

viewController.fireWillEnter();

Upvotes: 0

kris
kris

Reputation: 12620

This is a hack, but it works.

Wrap the logic that follows your template adjustment in a setTimeout and that gives the browser a moment to do the refresh:

/* my code which adjusts the ng 2 html template in some way */
setTimeout(function() {
    /* processing which follows the template change */
}, 100);

Upvotes: 0

Siddharth Pandey
Siddharth Pandey

Reputation: 669

Ionic 1

I haven't used Ionic 2 but currently i m using Ionic 1.2 and if they are still using ui-router than you can use reload: true in ui-sref

or you can add below code to your logout controller

$state.transitionTo($state.current, $stateParams, {
    reload: true,
    inherit: false,
    notify: true
});

Angular 2

Use

$window.location.reload();

or

location.reload();

Upvotes: 3

Diego Ponciano
Diego Ponciano

Reputation: 1463

You have to implement the CanReuse interface, and override the routerCanReuse to return false. Then, try calling router.renavigate().

Your component should look like this:

class MyComponent implements CanReuse {
  // your code here...
  routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction) { 
    return false;
  }
}

And then, when you perform login/logout, call:

// navigate to home
router.renavigate()

Upvotes: 0

Related Questions