1

我正在尝试使用 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);
                    }
                }
            }
        }
    })

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

4

1 回答 1

2

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

.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

但这无济于事

集合列表解析不会等待用户面板解析完成（我知道这是预期的行为）：

可能有更好的方法，但是您可以在 UserResourceLoader 中创建一个承诺，该承诺将在完成加载时解决，然后在 CollectionsByUserLoader 中等待承诺并在承诺解决时使用数据。

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

.state('root.default', { 
     ...
     resolve: {
          collectionsByUser: function(**user**, CollectionsByUserLoader, User) {
                        return CollectionsByUserLoader(User.data.id);
                     }
                }
 }
于 2014-01-25T02:44:38.330 回答