如何在 Angular 项目中调用浏览器后退按钮

Question

在我的 Angular 8 项目中，我目前有一个登录页面 (template-table.component)，其中显示了可以过滤和排序的项目列表。过滤器和排序被添加到路由 queryParams（例如：“/template-table?name=another&type=Type%201”）。如果您 select 列表中的某个项目，您将被带到另一条路线（具有 template-details.component），其中包含该项目的更多详细信息。此详细信息页面将有一个 'back to list' 按钮，可以让用户返回到他们之前的列表页面。

因为我想让用户返回到他们之前使用过的过滤器参数的列表，我不能简单地转到那个组件的路由，而是我想回到历史（比如如何浏览器后退按钮有效）。 那么，如何将元素 link 设置为浏览器后退按钮将 link 设置为什么？

所以，这是我的最低要求 template-detail.component.html:

<h1>template-details works!</h1>
<div>{{template}}</div>
<div>{{id}}</div>
<div><a routerLink="/template-table/">Return to list page</a></div>

我想我也想检查一下路由，看看它是否是带有查询参数的 template-table 组件路由，而不是无关的路由。（因此，路由需要像：“/template-table?params=xxx”，不能是 "google.com"。如果浏览器后退按钮与模板无关- table，然后它应该转到没有任何参数的“/template-table”（或者可能是我的 404 页面。）

我想要实现的基本功能是让用户能够过滤列表，转到另一个包含列表项更多信息的路径，然后 return 使用他们之前添加的相同过滤器添加到列表中。 如果有比尝试访问浏览器的后退按钮更好的方法，我很想听听。

感谢您提供的任何帮助。

Answer 1

类似的东西应该可以工作： routerLink="../"

但是由于图书馆的位置，您可以优雅地解决这个问题。看看这个 post：enter link description here

Answer 2

Arthurofos 关于使用位置服务的建议似乎是相关的，因为它可用于导航回您在路由到新组件之前所在的视图。

当然，虽然有非常 Javacsripty 的方式来做这些事情，但始终建议使用 Angular 的库，如果存在这样的替代方案的话。

在我们的例子中，它确实存在，并且它呈现为 'Location' 服务，您可以将其注入到您的组件中。

import { Location } from '@angular/common';

@Component({
  // Other component info
  providers: [Location, {provide: LocationStrategy, useClass: PathLocationStrategy}]
})
export class TestComponent {
   constructor(private location: Location, // Other constructor arguments) { }

   public goBack() { 
      this.location.back()
   }
}

https://alligator.io/angular/location-service/

如何在 Angular 项目中调用浏览器后退按钮

How to call browser back button in Angular Project

html

browser

routing

angular

angular8