web-dev-qa-db-fra.com

forcer la vue pour recharger dans le cadre ionic2

Après avoir parcouru Effacer l'historique et recharger la page lors de la connexion/déconnexion à l'aide d'Ionic Framework

Je veux savoir la même question, mais pour ionic2 en utilisant TypeScript.

Lors de la connexion et de la déconnexion, j'ai besoin de recharger le app.ts, car certaines classes exécutent des bibliothèques sur construct. 

ce serait essentiellement rediriger vers la maison et recharger. 

ionic-frameworkionic-viewionic2
6
Basit

Ionique 1

Je n'ai pas utilisé Ionic 2, mais j'utilise actuellement Ionic 1.2 et s'ils utilisent toujours ui-router, vous pouvez utiliser reload: true dans ui-sref

ou vous pouvez ajouter le code ci-dessous à votre contrôleur de déconnexion

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

Angulaire 2

Utilisation

$ window.location.reload ();

ou 

location.reload ();

2
Siddharth Pandey

J'ai trouvé cette réponse ici , (veuillez noter en particulier la ligne this.navCtrl.setRoot(this.navCtrl.getActive().component);, qui est de loin la solution la plus simple que j'ai trouvée pour recharger la page actuelle de Ionic 2 & 3 et des versions ultérieures de Angular ( le mien est 4), donc crédit dû en conséquence: 

RECHARGER LA PAGE ACTUELLE

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

}

Si vous souhaitez RECHARGER UNE DIFFÉRENTE PAGE, veuillez utiliser les éléments suivants (notez 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
maudulus

Pour ionic 2, cela fonctionne pour moi lorsque vous forcez le rechargement de page en déclenchant fireWillEnter sur un contrôleur de vue.

viewController.fireWillEnter();
0
paulitto

Voici ce qui a fonctionné pour moi pouractualiser uniquement la page actuelle-

J'essaie d'appeler la fonction refreshMe lorsque j'appelle onDelete à partir de ma page d'affichage.
Voir à quoi ressemble mon fichier page.ts- 

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

Ceci actualise uniquement la page actuelle.
Nous pouvons également appeler cette fonction de vue si nous avons besoin de as-- 

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

C'est un hack, mais ça marche.

Enveloppez la logique qui suit l'ajustement de votre modèle dans une setTimeout et donnez au navigateur un moment pour effectuer l'actualisation:

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

Vous devez implémenter l'interface CanReuse et remplacer la routerCanReuse pour renvoyer false. Ensuite, essayez d’appeler router.renavigate().

Votre composant devrait ressembler à ceci:

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

Et ensuite, lorsque vous vous connectez/déconnectez-vous, appelez:

// navigate to home
router.renavigate()
0
Diego Ponciano

J'utilise personnellement ces trois lignes pour rafraîchir totalement un composant

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

Vous pouvez utiliser ionViewWillLeave () pour afficher votre écran de démarrage pendant le rechargement du composant, puis le masquer avec ionViewDidEnter () une fois chargé.

J'espère que ça aide

0
Jeremy Morant