javascript - Angular - 动态选择起始状态

Question

显然，我的应用程序自动以默认状态启动(具有 url:“/”)。我们将其称为状态 A。

如果某个条件为真，我想保留这一点。这意味着如果 x === 4 例如，那么我希望状态 B 成为第一个加载的状态。

我的问题是，当我检查该条件时，例如在 app.run 中，默认状态已经加载并呈现在 View 中，然后才切换到状态B。

有什么方法可以阻止状态加载并仅在检查条件后才启动它？

Answer 1

有a working example

正如评论中所讨论的，我们可以使用 UI-Router 附带的 native 内置功能。其中之一是$urlRouterProvider.deferIntercept(defer)

Disables (or enables) deferring location change interception.

If you wish to customize the behavior of syncing the URL (for example, if you wish to defer a transition but maintain the current URL), call this method at configuration time. Then, at run time, call $urlRouter.listen() after you have configured your own $locationChangeSuccess event handler.

我。步骤 - 停止执行

因此，我们可以在.config()阶段定义状态

.config(['$stateProvider', '$urlRouterProvider','$locationProvider',
    function ($stateProvider, $urlRouterProvider,$locationProvider) {

        // States
        $stateProvider
          ...
          .state('parent', {
              ...
          })
          .state('parent.child', { 
              ...
          })
          ;
        
        ...
        // here we say STOP
        $urlRouterProvider.deferIntercept();
    }
])

二.步骤 - 初始化 .run() 中所需的内容 - 重新启用执行

这可能是一些简单的运行示例:

.run(['$urlRouter', '$timeout', '$state',
  function($urlRouter, $timeout, $state) {
    
    $timeout(function(){
      
      // here we turn all on again...
      $urlRouter.sync();
      $urlRouter.listen();
      
      // there could be some decision, driven by $http load
      // we just use some state as default target
      $state.go("parent.child");
    }, 1000)
    
}]);

Se确实等待一秒钟，然后我们重新启用所有执行并重定向到“parent.childd”...但也可以是任何其他，基于.run中所做的一些决定()阶段

检查一下here