В Aurelia Router можно ли получать уведомления, когда пользователь пытается перейти на ту же страницу? - PullRequest
Новая
       26

В Aurelia Router можно ли получать уведомления, когда пользователь пытается перейти на ту же страницу?

0 голосов
/ 20 сентября 2018

Маршрутизатор Aurelia запускает события в EventAggregator , на который я могу подписаться.Мой код подписывается на событие router:navigation:processing, поэтому, когда пользователь нажимает на маршрут, мое меню навигации закрывается. 

eventAggregator.subscribe('router:navigation:processing', e => menu.close());

Проблема заключается в том, что когда пользователь находится на странице, на которой он пытается перейти, затем меню остается открытым.Я хотел бы закрыть меню, когда они выбирают ту же страницу, на которой они находятся в данный момент.

Я также хотел бы отметить, что ссылки в моем меню выглядят так: 

<a route-href="route:showcase" class="menu-item">Showcase</a>

Я бы хотел, чтобы мои ссылки оставались такими, если это вообще возможно, потому что мне нравится, как aurelia-router связываетадрес href автоматически.

Ответы [ 2 ]

0 голосов
/ 20 сентября 2018

Я отметил ответ Фреда Клёвера как ответ, потому что я чувствую, что его пути, хотя их труднее реализовать, вероятно, намного мощнее.Но также вам нужно понимание внутренней работы фреймворка.В конце концов, я реализовал хакерский способ решения своей проблемы.Я создал пользовательский элемент с именем navigate-to-page-link.

navigate-to-page-link.ts 

import { bindable, autoinject } from 'aurelia-framework';
import { Store } from 'aurelia-store';
import { State } from '@src/state/state';
import { MenuStateActions } from '../menu-state';

@autoinject()
export class NavigateToPageLink{
  @bindable route: string;
  @bindable name: string;

  constructor(private store: Store<State>){}

  closeMenu(){
    this.store.dispatch(MenuStateActions.close);
    return true;
  }
}

navigate-to-page-link.html 

<template>
  <a route-href="route.bind: route" click.delegate="closeMenu()" class="menu-item">${name}</a>
</template>

Итак, в основном я использую aurelia-store, чтобы открывать и закрывать мое меню.Кроме того, мне нужно return true из метода click.delegate для навигации по ссылке href.

Внутри моего меню я использую этот элемент следующим образом: 

<require from="./navigate-to-page-link"></require>
<navigate-to-page-link route="home" name="Home"></navigate-to-page-link>
0 голосов
/ 20 сентября 2018

Нет, для этого нет реального встроенного механизма.history-browser отвечает за перехват событий кликов на тегах привязки и отправку фрагмента URL-адреса в routeHandler.

Это происходит только в том случае, если новый фрагмент отличается от старого ( или , если navigationStategy имеет значение «replace»);если нет, операция прерывается задолго до того, как маршрутизатор даже включается.

В зависимости от того, как часто вам это нужно, сколько времени стоит потратить и т. д., на ум приходят некоторые варианты:

  • Добавьте прослушиватель событий click.trigger к тегу привязки.При нажатии ваша проверка будет немного хакерской (она имитирует то, что делает фреймворк) для введенного BrowserHistory: history._getFragment(DefaultLinkHandler.getEventInfo(event).href) === history.fragment.Если значение равно true, вы находитесь на той же странице, и маршрутизатор ничего не будет делать, так что ваша очередь публиковать что-то в EventAggregator.

  • Или проще (но болеесклонны к проблемам / крайним случаям) альтернатива вышеописанному: зарегистрируйте событие щелчка, которое просто сравнивает атрибут href с window.location.href или некоторыми из его друзей.

  • Использование navigationStrategy.replace(не рекомендую, так как он без повода восстанавливает весь ваш компонент, но это вариант)

  • Переопределить метод BrowserHistory класса *1030*, который публикуется в EventAggregator (строка 138 или что-то в этом роде)index.js) когда this.fragment === fragment сделать это глобально, и зарегистрировать его с DI как History

...