ionViewWillEnter vs ionViewDidEnter

La réponse est assez simple et, comme toujours, la meilleure façon de voir ce qui se passe derrière les scènes, c'est d'inspecter le code source d'ions.

Longue histoire courte: la ionViewWillEnter cycle de vie du crochet est déclenché avant la transition de page commence, et la ionViewDidEnter est déclenché après la transition finitions. Veuillez prendre un coup d'oeil à la fin de cette réponse pour voir la référence au code source.

Ainsi, lorsque vous devez utiliser chacun de ces crochets? Il doit y avoir plusieurs scénarios possibles, donc ce ne sont que quelques idées basées sur certaines applications j'ai travaillé sur.

• Parfois, vous souhaitez mettre à jour certaines informations sur la page à chaque fois que l'utilisateur ouvre la page; qui peut nécessiter de faire une requête HTTP à un API à distance pour récupérer certaines données. Dans ce cas, on pourrait dire que l'utilisation de la IonViewWillEnter semble que le droit d'option, de sorte que vous pouvez en faire la demande dès que possible, l'obtention de la réponse plus tôt.

• La même chose s'applique lorsque vous avez besoin d'interagir avec le DOM pour une raison quelconque parce que le DOM a déjà été chargée lors de la IonViewWillEnter est exécutée, ce qui pourrait vous aider à initialiser la page dès que possible, et avec un peu de chance, la page peut être affichée à l'utilisateur prêt à être utilisé.

• La même chose est valable que lorsqu'il est nécessaire d'initialiser le point de vue avec certains paramètres que vous obtenez à partir de la vue précédente. Dans ce cas, puisque c'est une opération très simple, vous pouvez utiliser le ionViewWillEnter cycle de vie du crochet et le point de vue sera montré déjà initialisé à l'utilisateur.

Donc quand devez-vous utiliser la ionViewDidEnter alors?

• J'ai remarqué que parfois, lors de l'exécution de l'application sur de très vieux appareils android (avec moins de 512 mo - 1 go de RAM), l'animation peut être un peu à la traîne lors d'une requête à l'API dans les ionViewWillEnter, de sorte qu'il serait une bonne idée de faire ces requêtes à l'API dans les ionViewDidEnter pour s'assurer que l'animation est terminée

• Dans certaines applications j'ai été demandé d'ajouter un peu de fantaisie animations pour les éléments de la poussée de la page, comme apportant une partie du contenu à partir du bas, de la décoloration de certains autres éléments, après un retard, et ainsi de suite. Vous pouvez utiliser angulaire des animations pour que (dans l'ordre pour être en mesure d'avoir le contrôle sur le temps), et la meilleure façon d'éviter un certain retard sur ces animations serait d'utiliser la ionViewDidEnter crochet. Cela vous permettra également de faire de l'utilisateur l'impression que les animations des éléments à l'intérieur de cette page sont une continuation de la transition de la page elle-même.

---

Vous pouvez prendre un coup d'oeil à la NavControllerBase code:

1) IonViewWillEnter

//around line 666...
_transitionStart(...): Promise<NavResult> {

    //...

    //around line 700...

    //create a callback that needs to run within zone
    //that will fire off the willEnter/Leave lifecycle events at the right time
    transition.beforeAddRead(this._viewsWillLifecycles.bind(this, enteringView, leavingView));

   //...

}

Et...

  //around line 805...
  _viewsWillLifecycles(enteringView: ViewController, leavingView: ViewController) {
    if (enteringView || leavingView) {
      this._zone.run(() => {
        //Here, the order is important. WillLeave must be called before WillEnter.
        leavingView && this._willLeave(leavingView, !enteringView);
        enteringView && this._willEnter(enteringView);
      });
    }
  }

Si vous examinez les beforeAddRead méthode de la animation.d.ts définition vous allez voir:

/**
* Add a function which contains DOM reads, which will run
* before the animation begins.
*/
beforeAddRead(domReadFn: Function): Animation;

Alors maintenant, nous pouvons être sûrs que la ionViewWillEnter cycle de vie du crochet est exécutée avant la transition de page commence

2) IonViewDidEnter

Celui-ci est un peu plus simple. De nouveau dans la même NavControllerBase:

//around line 743...
  _transitionFinish(...): NavResult {

    //...

    //around line 753...
    if (hasCompleted) {
      //transition has completed (went from 0 to 1)
      if (enteringView) {
        enteringName = enteringView.name;
        this._didEnter(enteringView);
      }

      //..

    }

    //...

  }

Et

//around line 939...
  _didEnter(view: ViewController) {
    assert(this.isTransitioning(), 'nav controller should be transitioning');
    assert(NgZone.isInAngularZone(), 'callback should be zoned');

    try {
      view._didEnter();
      this.viewDidEnter.emit(view);
      this._app.viewDidEnter.emit(view);
    } catch (e) {
      this._errHandler && this._errHandler.handleError(e);
    }
  }

Donc à cause de cela, nous pouvons dire que la ionViewDidEntercycle de vie du crochet est déclenché une fois la transition terminée.

OriginalL'auteur sebaferreras