Angular 2如何使用路由器和location.go()检测后退按钮按下？
我已经构建了一个应用程序，它使用
若要在应用程序分区之间切换，请执行以下操作。我还使用
若要模拟同一页的子节之间的切换，请执行以下操作。我使用了一些URL重写规则，以便将所有路由重定向到
在页面刷新情况下。这允许路由器接收所请求的子部分作为URL参数。基本上，我已经设法避免使用
..。
routes.ts
export const routes: RouterConfig = [
{
path: '',
redirectTo: '/catalog',
pathMatch: 'full'
},
{
path: 'catalog',
component: CatalogComponent
},
{
path: 'catalog/:topCategory',
component: CatalogComponent
},
{
path: 'summary',
component: SummaryComponent
}
];如果我点击导航栏中的一个小节，会发生两件事：
使用必要的字符串更新URL，以便指示当前子部分
一种风俗习惯
动画滚动页面顶部的请求小节。
如果我刷新页面，我将使用先前定义的路由并提取必要的参数来恢复滚动到所请求的小节。
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将更改为前一个页面/url，但在UI中不会发生任何变化。如何检测是否按下了后退按钮以调用
函数来再次完成它的工作？
我看到的大多数答案都是关于这个事件的
，但此事件不会在我的应用程序中触发，因为我毕竟在URL中没有哈希...
回答 10
Stack Overflow用户
发布于 2017-04-11 22:04:29
我不知道其他答案是否过时了，但它们都不适合我在Angular 7中工作。我所做的是通过将其导入到我的组件中来添加一个Angular事件侦听器：
import { HostListener } from '@angular/core';然后监听
在
对象(按照Adrian的建议)：
@HostListener('window:popstate', ['$event'])
onPopState(event) {
console.log('Back button pressed');
}这对我很有效。
Stack Overflow用户
发布于 2019-08-08 00:08:28
解决此问题的另一种方法是订阅
Angular Router服务
..。由于我们正在处理路由，因此在我看来，使用Router events更有意义。
constructor(router: Router) {
router.events
.subscribe((event: NavigationStart) => {
if (event.navigationTrigger === 'popstate') {
// Perform actions
}
});
}我想指出的是
在浏览器上按后退和前进时发生。因此，为了有效地做到这一点，您必须找到一种方法来确定正在发生的是哪一种情况。对我来说，这只是使用
类型的对象
NavigationStart
它给出了关于用户来自哪里以及他们要去哪里的信息。
Stack Overflow用户
发布于 2017-07-04 08:52:23
要检测浏览器的后退按钮，请单击“import platformlocation from”@angular/common，并将以下代码放入您的构造函数中：
constructor(location: PlatformLocation) {
location.onPopState(() => {
alert(window.location);
}); }https://stackoverflow.com/questions/39132737
复制
相似问题
访问由stringify生成的json
在lua C++中访问由表键索引的表
如何打印由JSON数据生成的表？
嵌套表中的Lua访问表值
lua中的Json表拉取
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
