在路由器事件中获取正确的 url

Question

我的路由配置如下：

{ loadChildren: './public#PublicModule', path: '' },
{ loadChildren: './home#HomeModule', path: 'home' },
{ path: '**', redirectTo: '/404' }

在某个模板中（如果重要，我们称之为 xxx.component.html）我创建了一个按钮来在我的 404 路由中进行一些测试：

<button type="button" routerLink="unknown">Click here for unknown</button>

有了这个，我在路由home/xxx，按下按钮后，它工作，我的意思是它进入404页面，然而，为我返回以下内容：

NavigationEnd {id: 2, url: "/home/unknown", urlAfterRedirects: "/404"}

但我希望获得 REAL 之前的路由 (home/xxx)，而不是我在按钮中设置的 URL。有没有办法做到这一点？

PS1：我尝试使用pairwise，但它只有在调用404路由2次后才有效。

我的 404 组件看起来像：

export class NotFoundErrorComponent {

  public previousUrl: string;

  constructor(
    private router: Router
  ) {
    this.router.events
    .filter((event: any) => event instanceof NavigationEnd)
    .subscribe((event: any) => {
      console.log(event);
      // this.previousUrl = event.url;
    });
  }
  ...
}

Answer 1

这是一步一步发生的：

1. 您在/home/xxx
2. 您导航到/home/unknown
3. 路由器注意到您位于应重定向到 /404 的路径上，因此它会这样做。
4. 您位于/404，并且您检查了之前的网址/home/unknown。

我可以想到两种解决方法：

1. 不用将**重定向到/404，只需将404组件设置为路由器中的路径**即可。您将使用 404 组件继续使用 /home/unknown。
2. 实现您自己的服务，跟踪在您的应用程序中访问的 url。例如，您可以从 @angular/router 订阅 Location 服务，并跟踪 URL 的访问情况。