javascript – ANGULAR-UI-ROUTER：从URL解析状态

2019-10-01 07:45:21 阅读：171 来源： 互联网

标签：javascript angularjs angular-ui-router angular-ui

我正在创建一个具有动态状态的应用程序,有时我需要从URL解析状态名称.

例如：我有/ dashboard / user / 12268,我需要获得状态’dashboard.user’.

用ui-router提供的工具有没有办法做到这一点？我现在无法知道如何做到这一点……

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

在URL解析后加载状态.

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

>引导应用程序(没有状态)
>此时,ui-router已经加载
>获取用户有权访问的状态,并注册它们(这些状态在配置阶段后注册)
>找出我是否有一个匹配给定网址的状态重定向到那里.这就是我被困住的地方.

要在应用程序引导程序之后加载状态,我使用了包含状态和常量的Ben Nadel’s solution变体.

我在RequireJS中的数据主要有这个初始化代码：

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
        });
    }
});

TheloadManifest函数在我的应用程序(服务,工厂,控制器,路由器……)上注册所有后引导元素.

谢谢你的帮助,
ALX

解决方法:

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

您可以使用$stateProvider上的.decorator挂钩公开内部状态实现.你可以装饰国家建设者的任何财产;我随意选择了“父母”.

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);
});

标签：javascript,angularjs,angular-ui-router,angular-ui
来源： https://codeday.me/bug/20191001/1837966.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – ANGULAR-UI-ROUTER：从URL解析状态