web-dev-qa-db-fra.com

Recharger la page actuelle dans Aurelia

J'ai une application Aurelia dans laquelle l'utilisateur peut sélectionner l'entreprise sur laquelle il travaille actuellement. Chaque page de l'application dépend de la société actuellement sélectionnée. L'utilisateur peut sélectionner une nouvelle société dans un menu déroulant. La liste déroulante est un composant situé sur la barre de navigation.

Ce que j'aimerais, c'est que ce composant recharge la page en cours sur le gestionnaire change.delegate sans redémarrer l'application. Donc, régler window.location.href est hors de question.

Existe-t-il un moyen de forcer l'aurelia Router à recharger l'itinéraire/la page actuels?

L'alternative serait d'utiliser la variable EventAggregator pour signaler un changement de société dans l'application, mais cela nécessiterait soit de s'abonner à cet événement sur chaque page, soit de faire en sorte que chaque page hérite d'une classe de base qui s'abonne à cet événement, mais ces tâches sont beaucoup plus complexes. options.

aureliaaurelia-routeraurelia-navigation
15
Sergi Papaseit

Cela ne répond pas à votre question exacte qui est comment forcer un rechargement de la vue actuelle , mais avez-vous envisagé d'ajouter l'identifiant de la société actuelle à votre ou vos itinéraires? Cela résoudra votre problème et rendra vos itinéraires comme favoris: c.-à-d.: /#/company1/view1 et /#/company2/view1. Lorsque vous modifiez la société dans la liste déroulante, vous appelez router.navigate() avec le nouvel itinéraire et la nouvelle vue sera chargée/actualisée. 

Pour répondre à votre question exacte, j'ai testé les options router.navigate: router.navigate('myroute', {replace:true, trigger:true}) et aucune d'elles ne force le rechargement de la vue si la vue de droite est déjà chargée. En ajoutant ?ramdomNumber au nom de votre route, vous pouvez forcer la réactivation de la vue.

7
Sylvain

Bien que non officiellement pris en charge, il existe une variété de hacks suggestions dans un numéro pertinent de GitHub demandant cette fonctionnalité même.

Celui que je me suis mis au travail et qui n’implique ni la mise à jour du code source d’Aurelia ni l’ajout de données superflues à la route consiste à définir la activationStrategy de toutes mes routes sur invokeLifecycle au lieu de la valeur par défaut, comme suit:

import { activationStrategy } from 'aurelia-router';

export class App {

  configureRouter(config, router) {
    config.map([
      { 
        route: ['', 'home'],
        name: 'home',
        moduleId: 'home/index',
        activationStrategy: activationStrategy.invokeLifecycle
      },
      {
        route: 'users',
        name: 'users',
        moduleId: 'users/index',
        nav: true,
        activationStrategy: activationStrategy.invokeLifecycle
      },
      ... etc ...
    ]);
  }

}

Ainsi, la méthode activate() de la route sera exécutée comme prévu lorsque le modèle de vue est rechargé. Ensuite, dans le code qui lance le rechargement, je fais ce qui suit:

this.router.navigateToRoute(
  this.router.currentInstruction.config.name,
  this.router.currentInstruction.params,
  { replace: true }
);
8
Technetium

Meilleure réponse:

this.router.navigateToRoute(
  this.router.currentInstruction.config.name,
  {
    ...this.router.currentInstruction.params,
    reload: Number(this.router.currentInstruction.queryParams.reload || 0) + 1,
  },
  { trigger: true },
);

navigateToRoute() prend 3 paramètres:

  1. Nom de l'itinéraire: (extrait de l'instruction en cours)
  2. Paramètres de route: (extrait de l'instruction en cours et ajoute un rechargement incrémentiel pour changer de route; moyen le plus simple de faire naviguer le routeur)
  3. Options: L'option trigger: true force un activationStrategy: invokeLifecycle sur cette instruction de routage spécifique sans qu'il soit nécessaire de définir cette option dans le viewModel ou routeConfig pour un routage normal.
1
LStarky

Voici une solution simple pour actualiser la page: Dans aurelia-history-browser.js, ajouté une vérification dans updateHash() et si le nouveau _href est égal à l'ancien, rechargez la page depuis le le serveur).

Ensuite, pour actualiser la page, il vous suffit d’utiliser les options existantes:

router.navigateToRoute('watch', {}, { replace: true, trigger: true });

Le code mis à jour est copié ci-dessous:

function updateHash(location, fragment, replace) {
    if (replace) {
      var _href = location.href.replace(/(javascript:|#).*$/, '') + '#' + fragment;
      if (_href == location.href)
        location.reload(false);
      else
        location.replace(_href);
    } else {
      location.hash = '#' + fragment;
    }
  }
1
gravsten