使用angular 1.5组件路由处理浏览器刷新事件

Question

我已经实现了Angular 1.5 component routing 。 当用户通过单击或键盘F5刷新浏览器时，我正在寻找解决方案。 它应将用户重定向到首页，并应重置所有输入/选择的数据。

这是PLUNKER 。 这只有两页。

就我而言，如果用户确实刷新。 用户应被重定向到First ，所有输入/选择的数据将被重置为默认值。

注意：我知道Angular 1.5组件路由已弃用。 不幸的是，我只有在我的应用程序投入生产后才知道这一点。 我必须为用户提供一些解决方案，直到我们迁移到Angular2。

这是处理组件路由的代码：

var module = angular.module('app', ['ngComponentRouter']);

module.config(function($locationProvider) {
  $locationProvider.html5Mode(true);
});

module.value('$routerRootComponent', 'myFirstApp');

module.component('myFirstApp', {
  templateUrl: "mainview.html",
  $routeConfig: [{
    path: '/',
    redirectTo: ['/First']
  }, {
    path: '/first',
    name: 'First',
    component: 'firstComponent'
  }, {
    path: '/second',
    name: 'Second',
    component: 'secondComponent'
  }]
})

Answer 1

我能够做到，唯一需要做的就是以编程方式处理路由。 这行是神奇的window.onbeforeunload = $rootRouter.navigate(['First']);

确保注入$rootRouter & $window服务。

module.component('firstComponent', {
templateUrl: "1.html",
controllerAs: "vm",
controller: function($rootScope, sharedService, $rootRouter, $window) {

  window.onbeforeunload = $rootRouter.navigate(['First']);

}