Angular 4 - 按下后退按钮时如何路由到特定组件？

Question

我想在浏览器中点击 back 按钮时路由到特定路径。

我正在尝试以下代码段。但它只是暂时将URL更改为所需的URL，然后路由到上一个实际的URL。

constructor(location: PlatformLocation, private router: Router) {
    location.onPopState(() => {
        router.navigate(['/home']);
    });
}

Answer 1

我以不同的方式使用JavaScript找到了解决方案。

假设我当前处于“/ menu”状态，并且我想在按下后退按钮时导航到“/ home”。请检查以下代码段。

ngOnInit() {
window.history.pushState( {} , 'Home', '/home' );
window.history.pushState( {} , 'Menu', '/menu' ); }

我在ngOnInit()内的window.history中推送两个状态。首先是我想要在后退键上访问的网址(/home)，然后是当前网址(/menu)。

它运作良好，我已经实现了我想要的目标。

Answer 2

我建议将听众置于顶层，如：

  @HostListener('window:popstate', ['$event'])

并做

  router.navigate(['/home']);

内

Answer 3

您可以使用routerLink

https://angular.io/api/router/RouterLink

<a [routerLink]="['/main']">
 <b> < BACK </b>
</a>