棱角分明的UI路由器:管理依赖与决心棱角、路由器、分明、决心

2023-09-13 04:09:04 作者:回頭已無路

我试图建立与棱角分明的UI路由器插件路由角。前别的应的页(不管哪条路线)上发生的,该用户的数据需要被装载。然后根据必要可以装载路由的用户的数据(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.

是否有这个场景的模式?我想解决这个将用户数据添加为在每一个路线的决心的一种方法。然而,不仅这个问题似乎很冗余,效率低下,但它也不能正常工作(见下文code)。

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

下面是一个code样品不工作,因为 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路由器/维基/嵌套明─%26嵌套景观

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

但是,这并不与帮助。

该collectionlist决心不会等待userpanel决心完成(据我所知,这是预期的行为):

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

有可能是一个更好的办法,但你可以创建在UserResourceLoader一个承诺,当它完成加载,然后在CollectionsByUserLoader等​​待的承诺,并使用数据时承诺解决,这将解决。

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