如何获取导航历史？答案

【问题标题】：How to get navigation history?如何获取导航历史？
【发布时间】：2019-07-26 16:46:13
【问题描述】：

我正在尝试实现一个菜单，其中包括 Angular 应用程序中最近访问和最常访问的页面。如何获取导航堆栈？还是我需要挂钩navigationStart 事件并在创建时对其进行编译？

【问题讨论】：

范围是多少？您想跟踪当前用户最热门的页面吗？所有用户？所有选项卡/窗口？
目前 Angular 没有内置的可能性来获取所有导航历史记录。您需要使用导航事件来存储导航历史记录以满足进一步的需求。
您可以存储所有访问过的路线。你的问题答案是this link

【解决方案1】：

我认为通过简单的方法调用不可能获得完整的历史记录，但您可以通过订阅 NavigationEnd 自己轻松跟踪。

previousUrl: string;
constructor(router: Router) {
  router.events
  .filter(event => event instanceof NavigationEnd)
  .subscribe(e => {
    console.log('prev:', this.previousUrl);
    this.previousUrl = e.url;
  });
}

在此示例中，它仅保存上一个路线，但您可以将其存储在一个数组中以保存所有以前访问过的路线。

另请参阅： How to determine previous page URL in Angular?

更新：

您可以结合使用上面的代码和下面的代码，从您的应用程序开始订阅您的服务中的 NavigationEnd。

export class AppModule {
constructor(navigationEndService: NavigationEndService) {
    navigationEndService.init();
}

要在其他地方获取列表，您可以在服务中创建一个 getter。

【讨论】：

问题不仅与以前的 URL 有关，还与导航历史或最近访问的页面有关。
你看不到完整的历史，因为 Angular 使用了浏览器历史机制，它不会暴露历史的细节。
这似乎是最有可能的方法。您将在哪里挂钩到 navigationEnd 事件，以便它捕获每个导航事件 - 然后您如何引用它以从数组中获取值？
例如，您可以在服务类中执行上述操作。您可以在 app.module 文件中初始化路由事件侦听器，以便您的服务订阅 NavigationEnd 事件。我更新了上面的答案。