javascript - ANGULAR-UI-ROUTER:从 URL 解析状态

Question

我正在制作一个具有动态状态的应用程序，有时我需要从 url 中解析状态名称。

例如:我有 /dashboard/user/12268，我需要获取状态 'dashboard.user'。

ui-router 提供的工具有没有办法做到这一点？我现在找不到如何执行此操作...

我正在制作一个使用 requireJS 加载动态模块的应用程序。第一次没有问题，因为用户被发送到登录状态。登录后，我使用 require 只加载用户有权访问的状态。但是当用户重新加载页面时，我再次加载模块，并且需要将 url 解析为状态，这就是问题所在。我已经开始尝试使用 urlMatcherFactory 但无法解决它们。

状态在 URL 解析后加载。

流程是(页面http://localhost:8090/index.html#/dashboard/user/12268刷新后):

• 引导应用程序(无状态)
• 此时，ui-router已经加载完毕
• 获取用户有权访问的状态，并注册它们(这些状态在配置阶段之后注册)
• 查明我是否有一个与给定 url 匹配的状态以重定向到那里。这就是我被困的地方。

为了在应用程序引导后加载状态，我使用了 Ben Nadel's solution 的变体。包括状态和常量。

我在 RequireJS 中的 data-main 有这样的初始化代码:

require.config({
    // REQUIREJS CONFIGURATION
});

require(['app'], function (app) {
    app.bootstrap(document);

    var ng = angular.injector(['ng']);
    var $window = ng.get('$window')
    var $q = ng.get('$q');

    var appStorage = $window.localStorage;
    var loadedManifests;

    try {
        loadedManifests = JSON.parse(appStorage.getItem('loadedManifests'));
    } catch(e) {
        loadedManifests = [];
    }

    if (!angular.isArray(loadedManifests) || loadedManifests.length === 0) {
        $q.all([
                app.loadManifest('login/manifest'), //loadMainfest function loads the states for login
                app.loadManifest('logout/manifest') //load states for logout
            ])
            .then(function () {
                app.injector.get('$rootScope').$evalAsync(function () {
                    app.injector.get('$state').go('login');
                });
            });
    } else {
        var promisesArray = [];

        for(var i = 0; loadedManifests[i]; i++) {
            promisesArray.push(app.loadManifest(loadedManifests[i])); //load all manifests registered on localstorage
        }

        $q.all(promisesArray).then(function(){
            //TODO: Stuck. Get URL from querystring and resolve to valid state, or redirect to /login
        });
    }
});

loadManifest 函数在我的应用程序(服务、工厂、 Controller 、路由器等)上注册所有后引导元素。

谢谢你的帮助，
阿尔克斯

Answer 1

https://github.com/angular-ui/ui-router/issues/1651

您可以使用 $stateProvider 上的 .decorator Hook 来公开内部状态实现。您可以装饰状态生成器的任何属性；我随意选择了“ parent ”。

---

app.config(function($stateProvider) { 
  $stateProvider.decorator('parent', function (internalStateObj, parentFn) {
     // This fn is called by StateBuilder each time a state is registered

     // The first arg is the internal state. Capture it and add an accessor to public state object.
     internalStateObj.self.$$state = function() { return internalStateObj; };

     // pass through to default .parent() function
     return parentFn(internalStateObj); 
  });
});

---

现在您可以使用 .$$state() 访问内部状态对象，例如

var publicState = $state.get("foo");
var privateInternalState = publicState.$$state();

---

其次，遍历 $state.get() 中的每个状态并根据您的 URL 片段测试它们。

angular.forEach($state.get(), function(state) { 
  var privatePortion = state.$$state();
  var match = privatePortion.url.exec(url, queryParams);
  if (match) console.log("Matched state: " + state.name + " and parameters: " + match);
});