Перезагрузить страницу Aurelia

У меня есть приложение Aurelia, где пользователь может выбрать компанию, в которой они сейчас работают. Каждая страница в приложении зависит от выбранной в настоящий момент компании, и пользователь может выбрать новую компанию из выпадающего меню. Выпадающее меню представляет собой компонент, расположенный на навигационной панели.

Я хочу, чтобы этот компонент перезагрузил текущую страницу в обработчике change.delegate без перезапуска приложения. Поэтому установка window.location.href не может быть и речи.

Есть ли способ заставить aurelia Router перезагрузить текущий маршрут/страницу?

Альтернативой было бы использовать EventAggregator, чтобы сигнализировать об изменении компании во всем приложении, но для этого требуется либо подписка на это событие на каждой странице, либо наследование каждой страницы из базового класса, который подписывается на это событие, но это гораздо более сложные варианты.

Ответ 1

Это не отвечает на ваш точный вопрос, как заставить перезагрузить текущий вид, но подумал ли вы о добавлении текущего идентификатора компании к вашим маршрутам? Это решит вашу проблему и сделает ваши закладки закладок: ie: /#/company1/view1 и /#/company2/view1. Когда вы меняете компанию в раскрывающемся списке, вы вызываете router.navigate() с новым маршрутом, и новое представление будет загружено/обновлено.

Чтобы ответить на ваш точный вопрос, я протестировал параметры router.navigate: router.navigate('myroute', {replace:true, trigger:true}), и ни один из них не заставил перезагрузить представление, если правильный вид уже загружен. Добавив ?ramdomNumber к имени вашего маршрута, вы можете принудительно активировать представление.

Ответ 2

Хотя официально не поддерживается, есть множество ~~хаков~~ предложений в соответствующем вопросе GitHub просящих этой самой функциональности.

Тот, который я получил для работы, который не связан с обновлением исходного кода aurelia и добавлением лишних данных на маршрут, заключается в том, чтобы activationStrategy на всех моих маршрутах как invokeLifecycle а не по умолчанию, например:

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

}

Это делает так, чтобы метод route activate() как вы ожидаете, когда модель просмотра будет перезагружена. Затем в коде, который инициирует перезагрузку, я делаю следующее:

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

Ответ 3

Вот простое решение для обновления страницы: в aurelia-history-browser.js добавлена проверка updateHash(), и если новый _href равен старому, перезагрузите страницу из кеша (а не сервера).

Затем, чтобы обновить страницу, вам просто нужно использовать существующие параметры:

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

Обновленный код копируется ниже:

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

Ответ 4

Лучший ответ:

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

navigateToRoute() принимает 3 параметра:

Название маршрута: (получить от текущей инструкции)
Параметры маршрута: (получить от текущей инструкции и добавить инкрементную перезагрузку для изменения маршрута, самый простой способ заставить маршрутизатор фактически перемещаться)
Параметры: параметр trigger: true заставляет activationStrategy: invokeLifecycle для этой конкретной команды маршрутизации без необходимости устанавливать этот параметр в viewModel или routeConfig для нормальной маршрутизации.