Question

Aurelia在导航到新路线后不会自动将浏览器滚动到页面顶部，因此我可以使用EventAggregator轻松解决此问题，并聆听router:navigation:complete我的主App类（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

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

由于您订阅了router:navigation:complete事件，因此路由已经完成，因此值将重新设置为false。如果您订阅了router:navigation:processing活动，则在致电true时该活动应为router.navigateBack()。

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

从路由器访问isExplicitNavigationBack：navigation：complete事件

1 个答案: