代码之家 › 专栏 › 技术社区 › Evan Larsen

在Aurelia路由器中,当用户试图导航到同一页时,是否可以得到通知?

aurelia-router aurelia

1

Evan Larsen · 技术社区 · 7 年前

Aurelia Router 在中触发事件 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 回复 | 直到 7 年前

1

Fred Kleuver 7 年前

不,没有真正的内在机制。 history-browser 负责拦截锚标记上的点击事件,并将url片段发送到routeHandler。

只有当新片段与旧片段不同时,它才会这样做( 或

根据你需要这个的频率和它值得投资的时间等,你会想到一些选择:

click.trigger 锚定标记上的事件侦听器。单击一下,您的检查就会有点不正常(它模仿了框架的功能) BrowserHistory history._getFragment(DefaultLinkHandler.getEventInfo(event).href) === history.fragment
或者更简单(但更容易出现问题/边缘情况)的替代方法:注册一个click事件,该事件只是比较 href 属性为 window.location.href
使用 navigationStrategy.replace (不推荐,因为它无缘无故地重做整个组件,但这是一个选项)
覆盖 浏览器历史记录 班级 navigate() this.fragment === fragment 在全球范围内执行此操作,并在DI中注册为 History

2

1

Evan Larsen 7 年前

我把Fred Kleuver的答案标记为答案,因为我觉得他的方法虽然更难实现,但可能更强大。但您还需要了解框架的内部工作原理。最后,我实现了一个解决问题的黑客方法。我创建了一个名为 navigate-to-page-link

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

导航到页面-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>