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

时间:2016-10-24 18:49:17

标签: javascript html angularjs angular-routing

我已实施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'
  }]
})

1 个答案:

答案 0 :(得分:0)

我能够做到这一点,只需要以编程方式处理路由。 这一行正在进行魔术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']);

}