Angular 2如何使用router和location.go()检测后退按钮按下情况? [英] Angular 2 How to detect back button press using router and location.go()?

问题描述

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

I have built an app that uses router 3.0.0-beta.1 to switch between app sections. I also use location.go() to emulate the switch between subsections of the same page. I used <base href="/"> and a few URL rewrite rules in order to redirect all routes to index.html in case of page refresh. This allows the router to receive the requested subsection as a URL param. Basically I have managed to avoid using the HashLocationStrategy.

routes.ts

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

如果我在导航栏中单击一个小节，则会发生两种情况:

If I click on a subsection in the navigation bar 2 things happen:

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

• logation.go() updates the URL with the necessary string in order to indicate the current subsection
• A custom scrollTo() animation scrolls the page at the top of the requested subsection.

如果刷新页面，则说明我使用的是先前定义的路由，并提取必要的参数以恢复滚动到所请求的小节.

If I refresh the page I am using the previously defined route and extract the necessary parameter to restore scroll to the requested subsection.

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()函数来再次执行它的工作?

All works fine except when I click the back button. If previous page was a different section, the app router behaves as expected. However if the previous page/url was a subsection, the url changes to the previous one, but nothing happens in the UI. How can I detect if the back button was pressed in order to invoke the scrollTo() function to do it's job again?

我在事件onhashchange上看到的大多数答案都是错误的，但是由于我的URL毕竟没有哈希值，因此该事件不会在我的应用中触发...

Most answers I saw relly on the event onhashchange, but this event does not get fired in my app since I have no hash in the URL afterall...

推荐答案

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

I don't know if the answers are dated, but neither of them worked well for me in Angular 7. What I did was add an Angular event listener by importing it into my component:

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

，然后在window对象上侦听popstate(按照Adrian的建议):

and then listening for popstate on the window object (as Adrian recommended):

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

这对我有用.

这篇关于Angular 2如何使用router和location.go()检测后退按钮按下情况?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！