Angular-ui-router:使用解析管理依赖项 [英] Angular-ui-router: managing dependencies with resolve

问题描述

我正在尝试使用 angular-ui-router 插件为 angular 设置路由.在页面上发生任何其他事情之前(无论是哪条路线)，需要加载用户的数据.然后可以根据用户的数据(id、用户名等)加载路由所需的其他数据组件.

I'm trying to set up routing with the angular-ui-router plugin for angular. Before anything else should happen on the page (no matter which route), the user's data needs to be loaded. Then based on the user's data (id, username, etc.) other data components necessary for the route can be loaded.

这种情况有模式吗?我在想解决这个问题的一种方法是将用户数据添加为 每条 路由的解析.然而，这不仅看起来非常多余和低效，而且也不起作用(见下面的代码).

Is there a pattern for this scenario? I was thinking one way to solve this would be to add the user data as a resolve on every route. However, not only does this seem very redundant and inefficient, but it also doesn't work (see code below).

这是一个不起作用的代码示例，因为 collectionlist 解析不等待 userpanel 解析完成(我知道这是预期的行为):

Here's a code sample that doesn't work because the collectionlist resolve doesn't wait for the userpanel resolve to finish (and I understand that that's the expected behavior):

.state('default', {
        url: '/',
        views: {
            'userpanel' : {
                templateUrl: 'js/partials/user_panel.html',
                controller: 'userController',
                resolve: {
                    user: function(UserResourceLoader) {
                        return UserResourceLoader();
                    }
                }
            },
            'collectionlist' : {
                templateUrl: 'js/partials/collection_list.html',
                controller: 'collectionsController',
                resolve: {
                    collectionsByUser: function(CollectionsByUserLoader, User) {
                        return CollectionsByUserLoader(User.data.id);
                    }
                }
            }
        }
    })

对此的任何建议都会非常有帮助.

Any suggestions for this would be very helpful.

推荐答案

您应该能够创建一个父状态，所有其他状态都可以通过依赖项从该状态继承.

You should be able to create a parent state which all of the other states can inherit from with the dependency.

.state('root',{
     resolve: {
         user: function(UserResourceLoader) {
             return UserResourceLoader();
         }
     }
 })
 .state('root.default', {
    url: '/',
    views: {
        'userpanel' : {
            templateUrl: 'js/partials/user_panel.html',
            controller: 'userController'
        },
        'collectionlist' : {
            templateUrl: 'js/partials/collection_list.html',
            controller: 'collectionsController',
            resolve: {
                collectionsByUser: function(CollectionsByUserLoader, User) {
                    return CollectionsByUserLoader(User.data.id);
                }
            }
        }
    }
})     

有关嵌套状态的更多信息，请参阅:https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

for more information on nested states see: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

但这对

collectionlist 解析不会等待用户面板解析完成(我知道这是预期的行为):

The collectionlist resolve doesn't wait for the userpanel resolve to finish (and I understand that that's the expected behavior):

可能有更好的方法，但您可以在 UserResourceLoader 中创建一个 promise，它会在加载完成后解析，然后在 CollectionsByUserLoader 中等待 promise 并在 promise 解析时使用数据.

There may be a better way but you could create a promise in the UserResourceLoader which will resolve when it finishes loading then in CollectionsByUserLoader wait on the promise and use the data when the promise resolves.

更好的方法是使用嵌套解析.如果将父函数的解析注入子函数.您不必等待其他决心的承诺.像这样.

a better way is to use nested resolves. If you inject the resolve from the parent function into the child function. You don't have to wait on the promise from the other resolve. like so.

.state('root.default', { 
     ...
     resolve: {
          collectionsByUser: function(**user**, CollectionsByUserLoader, User) {
                        return CollectionsByUserLoader(User.data.id);
                     }
                }
 }

这篇关于Angular-ui-router:使用解析管理依赖项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！