防止页面重新加载状态

Posted 2021-04-06

如果使用AngularJs 1.6和启用了html5模式的UI-Router从窗口重载/ F5键打开应用程序，如何防止加载某些状态。

我的UI-Router配置的一部分：

.state("recordform", {
            url: "/form/:formid/:recordid",
            templateUrl: "Form.html",
        })
        .state("modalform", {
            parent: "RecordForm",
            url: "/modalform/:modalformid/:modalrecordid",
            templateUrl: "ModalForm.html"
        })

如果通过粘贴链接或浏览器中的F5打开页面，我需要阻止加载“模态”状态。

“模态”状态在模态窗口中打开，我不想在页面重新加载时打开。刷新事件结束后，应手动访问状态。

我试图检查“root”状态，如果url中有某些字符串，但root似乎不知道除了他自己之外的其他状态。

我还可以检查“模态”控制器，如果状态是从F5打开但我不知道如何做到这一点。

答案

您可以侦听状态更改事件（或在较新版本的UI路由器中实现转换挂钩），并检查以前状态是否存在。

这个想法是，如果通过页面刷新或URL粘贴访问状态，则先前的状态将不存在。

$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams, options) {
  if (!fromState && toState.name === 'modalform') {
    event.preventDefault(); // Prevent access to the state

    // optionally redirect to other state if required
    $state.go("your_default_state");
  }
})

并且，如果从任何其他州导航，modalform州将是可访问的，因为在那个时候，toState将存在。