Question

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

这种情况是否有模式？我认为解决这个问题的一种方法是在每条路线上添加用户数据作为解决方案。但是，这不仅看起来非常冗余和低效，而且它也不起作用（参见下面的代码）。

这是一个不起作用的代码示例，因为collectionlist解决方案不等待userpanel解析完成（并且我理解这是预期的行为）：

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

对此的任何建议都会非常有用。

Answer 1

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

.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

但这对

没有帮助

collectionlist resolve不会等待userpanel解析完成（我明白这是预期的行为）：

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

编辑：更好的方法是使用嵌套的解析。如果您将父函数的解析注入子函数。你不必等待另一个决心的承诺。像这样。

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

Angular-ui-router：使用resolve来管理依赖关系

1 个答案: