Angular 9：从外部 URL 重定向后无法重定向到 Angular 应用程序中的特定路由

Question

我有一个使用版本 9 的 Angular 应用程序。从我的一条路线（例如/search/details/id），我使用从 API 响应收到的 URL 值重定向到外部 URL，例如

window.location.href = "https://www.payment.com";

现在我被重定向到外部付款页面，我可以在其中付款或取消交易。

如果我单击“取消”，我将被重定向回上一页，这是我的角度应用程序，路线为/search/details/:id。从这里，如果我单击浏览器后退按钮，我将进入支付页面https://www. payment.com。我想导航到 Angular app /search路线，而不是我最初导航到 /search/details/id 的路线。

我尝试通过以下方式处理组件中的浏览器后退按钮，

1. fromEvent(window, 'popstate')
      .subscribe((e) => {
        console.log(e, 'back button');
        this.router.navigate(
          ['/search']);
   });
   Added inside the constructor of the component corresponding to /search/details/:id

2. router.events.forEach((event) => {
      if(event instanceof NavigationStart) {
        if (event.navigationTrigger === 'popstate') {
          console.log(event, 'back button router');
        }
      }
    });
    Added inside constructor
3. @HostListener('window:popstate', ['$event'])
  onPopState(event) {
    this.router.navigate(
        ['search/']);
  }
  Inside the component

当我从外部页面返回并从 /search/details/:id 页面单击浏览器后退按钮时，上述回调都不会被触发。但是，当我从 /search/details/id 页面单击浏览器后退按钮而不转到外部页面时，会触发上述回调并将其带到 /search 页面。

所以我认为从外部重定向后重新加载角度应用程序可以防止触发 popstate 事件。

任何想法/解决方案都将受到高度赞赏。

谢谢

Answer 1

当您这样做时，window.location.href = "https://www.payment.com";您会关闭当前应用程序并打开新应用程序（由 payment.com 提供的应用程序）。

我认为完成您必须做的事情的一个好方法是创建一个内部包含 iframe 的新组件，并将其作为模式或弹出窗口打开。可能你必须使用DomSanitizerurl 来清除 XSS 风险