AngularJS - UI 路由器 - 以编程方式添加状态 [英] AngularJS - UI Router - programmatically add states

问题描述

有没有办法在模块配置后以编程方式向 $stateProvider 添加状态，例如服务 ?

Is there a way to programmatically add states to $stateProvider after module configuration, in e.g. service ?

为了给这个问题添加更多上下文，我有两种方法可以使用:

To add more context to this question, I have a situation where I can go with two approaches:

1. 尝试强制重新加载模块配置中定义的状态，问题是状态有一个 reloadOnSearch 设置为 false，所以当我尝试 $state.go('state.name', {new:param}, {reload:true}); 什么都没发生，有什么想法吗?

1. try to force the reload on the state defined in the module configuration, the problem is that state has a reloadOnSearch set to false, so when I try $state.go('state.name', {new:param}, {reload:true}); nothing happens, any ideas ?

状态定义

.state('index.resource.view', {
  url: "/:resourceName/view?pageNumber&pageSize&orderBy&search",
  templateUrl: "/resourceAdministration/views/view.html",
  controller: "resourceViewCtrl",
  reloadOnSearch: false,
})

1. 尝试以编程方式添加我需要从服务加载的状态，以便路由可以正常工作.如果可能，我宁愿选择第一个选项.

推荐答案

查看 -edit- 获取更新信息

通常在配置阶段将状态添加到 $stateProvider.如果您想在运行时添加状态，您需要保留对 $stateProvider 的引用.

See -edit- for updated information

Normally states are added to the $stateProvider during the config phase. If you want to add states at runtime, you'll need to keep a reference to the $stateProvider around.

此代码未经测试，但应该可以满足您的需求.它创建了一个名为 runtimeStates 的服务.您可以将其注入到运行时代码中，然后添加状态.

This code is untested, but should do what you want. It creates a service called runtimeStates. You can inject it into runtime code and then add states.

// config-time dependencies can be injected here at .provider() declaration
myapp.provider('runtimeStates', function runtimeStates($stateProvider) {
  // runtime dependencies for the service can be injected here, at the provider.$get() function.
  this.$get = function($q, $timeout, $state) { // for example
    return { 
      addState: function(name, state) { 
        $stateProvider.state(name, state);
      }
    }
  }
});

我在 UI-Router 中实现了一些叫做未来状态的东西Extras 为您处理一些极端情况，例如将 url 映射到尚不存在的状态.Future States 还展示了如何延迟加载运行时状态的源代码.查看源代码感受一下所涉及的内容.

I've implemented some stuff called Future States in UI-Router Extras that take care of some of the corner cases for you like mapping urls to states that don't exist yet. Future States also shows how you can lazy load the source code for runtime-states. Take a look at the source code to get a feel for what is involved.

在 UI-Router 1.0 中，可以使用 StateRegistry.register 和 StateRegistry.deregister.

In UI-Router 1.0, states can be registered and deregistered at runtime using StateRegistry.register and StateRegistry.deregister.

要访问 StateRegistry，请将其注入为 $stateRegistry，或者注入 $uiRouter 并通过 UIRouter.stateRegistry.

To get access to the StateRegistry, inject it as $stateRegistry, or inject $uiRouter and access it via UIRouter.stateRegistry.

UI-Router 1.0 还包括开箱即用的未来状态，可处理状态定义的延迟加载，甚至通过 URL 进行同步.

UI-Router 1.0 also includes Future States out of the box which handles lazy loading of state definitions, even synchronizing by URL.

这篇关于AngularJS - UI 路由器 - 以编程方式添加状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！