Geek Answers Handbook

Representation of force for reload within ionic2

Going through Clear History and reloading the page on login / logout using the Ionic Framework

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

When logging in and logging out, I need to reload app.ts , because there are classes that launch libraries during construction.

it will mainly be redirected to the house and rebooted.

+6
source share
7 answers

Ionic 1

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

or you can add the code below to your exit controller

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

Angular 2

Using

$ window.location.reload ();

or

location.reload ();

+2
source

Found this answer here (note, in particular, the line this.navCtrl.setRoot(this.navCtrl.getActive().component); which is by far the easiest solution I came across to reload an existing page for Ionic 2 and 3 and later versions of Angular (mine - 4), so the loan should be, respectively:

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 RESET 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); } }
+4
source

You must implement the CanReuse interface and override 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 log in / out, call:

 // navigate to home router.renavigate()
0
source

This is a hack, but it works.

Wrap the logic that follows the template setup in setTimeout , and this gives the browser the ability to update:

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

For ion 2, it works for me when you force a page reload by calling fireWillEnter on the view controller

 viewController.fireWillEnter();
0
source

Here's what helped me refresh only the current page -

I try to call the refreshMe function when I call onDelete from my view page,
See what my page.ts- file looks like

  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); } }

It just refreshes only the current page.
We can also call this function from the view if we need how ...

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

I personally use these three lines to completely update the 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 ionViewWillLeave () to display your splash screen while the component reboots, and then hide it with ionViewDidEnter () after loading it.

Hope help

0
source

More articles:


All Articles