从 router:navigation:complete 事件访问 isExplicitNavigationBack

Question

Aurelia 在导航到新路线后不会自动将浏览器滚动到页面顶部，所以我使用 EventAggregator 轻松解决了这个问题，监听 router:navigation:complete 事件在我的主要 App class (app.js):

import {inject} from 'aurelia-framework';
import {EventAggregator} from 'aurelia-event-aggregator';

@inject(EventAggregator)
export class App {
    constructor (ea) {
        this.ea = ea;

        this.ea.subscribe('router:navigation:complete', e => {
            document.body.scrollTop = document.documentElement.scrollTop = 0;
        });
    }
}

我最近注意到路由器上的 isExplicitNavigationBack 属性这对于防止用户向后导航时顶部滚动非常有用，但是属性是总是false。我试过使用后退按钮以及 Router.navigateBack().

我希望简单地将我的订阅回调更改为：

if (!e.instruction.router.isExplicitNavigationBack) {
    document.body.scrollTop = document.documentElement.scrollTop = 0;
}

但不幸的是 isExplicitNavigationBack 总是错误的 - 为什么？

Answer 1

在 commit 中添加 isExplicitNavigationBack 属性你可以看到在调用 router.navigateBack() 时该值被设置为 true 但它被设置回false 在 resolveInstruction。

由于您订阅了 router:navigation:complete 事件，路由已经完成，因此值被设置回 false。如果订阅了router:navigation:processing事件，调用router.navigateBack().

应该是true

this.ea.subscribe('router:navigation:processing', e => {
  if (!e.instruction.router.isExplicitNavigationBack) {
    document.body.scrollTop = document.documentElement.scrollTop = 0;
  }
});

从 router:navigation:complete 事件访问 isExplicitNavigationBack

Access isExplicitNavigationBack from router:navigation:complete event

aurelia