Angular 4初始页面加载可以停用路由保护不起作用

Question

使用 canDeactivate 保护我试图阻止浏览器返回操作。所以，现在在我的浏览器新选​​项卡上加载站点 URL 成功地让我进入初始页面。现在，无需在页面上进行任何用户交互，按下浏览器后退按钮即可将我带回到新的选项卡/空白页面状态，而根本无需进入保护代码。但是，如果我在按下后退按钮之前单击应用程序中的任意位置/滚动，则可以很好地触发防护。如何在初始页面上没有用户交互或通过代码触发用户交互的情况下使警卫运行？

在登陆组件中，我尝试创建一个隐藏元素并尝试将焦点放在 onInit 内部，但没有成功。

我正在延迟加载 app-routing.module.ts 中的模块

const routes: Routes = [
{
   path: '',
   children: [
   { path: '', redirectTo: '', pathMatch: 'full' },
   { path: 'dashboards',
      loadChildren: './dashboards/dashboards.module#DashboardsModule',
      canLoad: [GoBackGuard],
      canDeactivate: [GoBackGuard]
   }]}];

还尝试了 javascript 代码来阻止浏览器返回导航，但也没有帮助。

<script>
$(window).load(function(e){
   window.history.pushState(null, "", window.location.href);
window.onpopstate = function() {
   window.history.pushState(null, "", window.location.href);
}
});
</script>

Answer 1

将以下内容添加到您的 app.component.ts 构造函数中：

history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
  history.pushState(null, null, document.URL);
});

这将阻止浏览器返回按钮。如果你点击返回，它不会带你回到新标签或上一个标签。