后退按钮事件不会触发 Angular答案

【问题标题】：Back button event does not fire Angular后退按钮事件不会触发 Angular
【发布时间】：2017-08-15 05:37:29
【问题描述】：

我正在尝试通过单击浏览器中的后退按钮将用户重定向到特定的 url，这是代码

constructor(private router: Router,private location: PlatformLocation) {        
        let eventUrl = window.sessionStorage.getItem('Event');
        this.location.onPopState(() => {
            alert('click');
            this.router.navigate(['/', this.selectedLanguage, 'event', eventUrl]);
        });
    }

但当用户单击后退按钮时，它似乎不会触发事件。代码在当前组件中。问题是什么？

编辑

我尝试了以下建议的答案，但这似乎也不起作用，函数被调用，但它仍然重定向到上一页而不是下面提到的 url

unload(event: any) {
        let eventUrl = window.sessionStorage.getItem('buyerEvent');
        this.router.navigateByUrl('/' + this.selectedLanguage + '/event/' + eventUrl);
    }

【问题讨论】：

为什么返回按钮的代码在构造函数里面？
这是浏览器的返回按钮
对不起，我在手机上没有正确阅读它
控制台中的任何错误
只有当你在点击back按钮后离开你的应用时，该事件才会触发。

标签： angular typescript back-button angular-route-segment

【解决方案1】：

您可以在离开应用程序时将您想做的事情绑定到window.unload 事件。这里我使用了HostListener。

@HostListener('window: unload', ['$event'])
unload(event) {
  window.open('https://localhost:4200', '_blank');
  window.close();
}

提到Chrome会默认屏蔽window.open，你必须更改屏蔽策略。

【讨论】：

@Sajeetharan 我刚刚在我的本地应用程序中确认，它工作正常。顺便说一句，我通过在AppComponent 找到上面的代码进行测试，但我认为这无关紧要。
函数正在被调用，但它不会重定向到不同的 url。它返回到在这种情况下是前一个的条带窗口
@Sajeetharan window.open 将在新选项卡中打开不同的 URL，window.close 将关闭当前选项卡。这是针对您的特定要求。
@Sajeetharan 还要确保您在 新标签页 中打开网址，由于某种原因，当您尝试在当前标签页中打开它时它不会起作用。跨度>

【解决方案2】：

我正在使用位置

Import { Location } from '@angular/common';

在构造函数上声明

constructor(private _location: Location){}

制作一个函数

backClicked() {
    this._location.back();
}

然后将其设置为按钮

<button (click)="backClicked()"> TEAM FALL BACK</button>

然后看奇迹发生......

【讨论】：

按钮是浏览器的一个
this.checkRouter.navigateByUrl('/');所以尝试使用 navigateByUrl 到您的代码