Перезагрузить текущую страницу в Аурелии

Question

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

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

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

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

Answer 1

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

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

Answer 2

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

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

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

}

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

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

Answer 3

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

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 параметра:

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

Answer 4

Вот простое решение для обновления страницы: в 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;
    }
  }