Angular 2 如何使用路由器和 location.go() 检测后退按钮按下？

Question

我构建了一个应用程序，它使用 router 3.0.0-beta.1 在应用程序部分之间切换。我还使用 location.go() 来模拟同一页面的子部分之间的切换。我使用了 <base href="/"> 和一些 URL 重写规则，以便在页面刷新的情况下将所有路由重定向到 index.html 。这允许路由器接收请求的子部分作为 URL 参数。基本上我已经设法避免使用 HashLocationStrategy 。

路线.ts

 export const routes: RouterConfig = [
    {
        path: '',
        redirectTo: '/catalog',
        pathMatch: 'full'
    },
    {
        path: 'catalog',
        component: CatalogComponent
    },
    {
        path: 'catalog/:topCategory',
        component: CatalogComponent
    },
    {
        path: 'summary',
        component: SummaryComponent
    }
];

如果我点击导航栏中的一个小节，会发生 2 件事：

• logation.go() 使用必要的字符串更新 URL 以指示当前子部分
• 自定义 scrollTo() 动画在请求的小节顶部滚动页面。

如果我刷新页面，我将使用之前定义的路由并提取必要的参数以恢复滚动到请求的子部分。

 this._activatedRoute.params
    .map(params => params['topCategory'])
    .subscribe(topCategory => {
        if (typeof topCategory !== 'undefined' &&
            topCategory !== null
        ) {
            self.UiState.startArrowWasDismised = true;
            self.UiState.selectedTopCategory = topCategory;
        }
    });

一切正常，除非我单击后退按钮。如果上一页是不同的部分，则应用程序路由器会按预期运行。但是，如果前一个页面/url 是一个小节，则 url 会更改为前一个，但 UI 中没有任何反应。我如何检测是否按下后退按钮以调用 scrollTo() 函数再次完成它的工作？

我看到的大多数答案都依赖于事件 onhashchange ，但是这个事件并没有在我的应用程序中被触发，因为毕竟我的 URL 中没有哈希……

原文由 Adrian Moisa 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我不知道其他答案是否过时，但在 Angular 7 中，它们都不适合我。我所做的是通过将 Angular 事件侦听器导入到我的组件中来添加它：

 import { HostListener } from '@angular/core';

然后在 --- 对象上监听 popstate window 对象（正如 Adrian 推荐的那样）：

   @HostListener('window:popstate', ['$event'])
  onPopState(event) {
    console.log('Back button pressed');
  }

这对我有用。

原文由 VSO 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这个问题的另一种选择是订阅 Angular Router 服务 发出的事件。由于我们正在处理路由，在我看来使用路由器事件更有意义。

 constructor(router: Router) {
    router.events
      .subscribe((event: NavigationStart) => {
        if (event.navigationTrigger === 'popstate') {
          // Perform actions
        }
      });
}

我想指出 popstate 在浏览器上按下后退和前进时发生。因此，为了有效地执行此操作，您必须找到一种方法来确定正在发生的是哪一个。对我来说，这只是使用了 event 类型为 NavigationStart 的对象，它提供了有关用户来自哪里以及他们要去哪里的信息。

原文由 Jon 发布，翻译遵循 CC BY-SA 4.0 许可协议