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应用程序/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页面。

因此，我认为从外部重定向后重新加载angular应用程序可以防止popstate事件被触发。

我们非常感谢您的任何想法/解决方案。

感谢

Answer 1

当您执行window.location.href = "https://www.payment.com";时，您关闭当前应用程序并打开新应用程序(由payment.com提供的应用程序(。

我认为一个很好的方法是创建一个内部有iframe的新组件，并以模态或弹出方式打开它。也许你必须使用DomSanitizer来清除XSS风险的url

Answer 2

在page/search/details/id的构造函数中添加以下两行：

history.pushState(null, '', 'http://localhost:4200/search');
history.pushState(null, '', 'http://localhost:4200/search/details/id');

或在生产中：

history.pushState(null, '', 'https://your_domain/search');
history.pushState(null, '', 'https://your_domain/search/details/id');