Angular-UI 路由器 - 解决不等待承诺解决到期状态切换的问题 [英] Angular-UI Router - Resolve not waiting for promise to resolve due state switching

问题描述

我知道已经有一个类似的问题 Angular-UI Router - Resolve not waiting for promise to resolve? 但和我的问题不太一样.

I know there is already a similar question Angular-UI Router - Resolve not waiting for promise to resolve? but is not exactly like my problem.

我有两种状态:

.state('entities', {
    url: '/',
    ...
    resolve: {
       data: function (xyzService) {
          return xyzService.listEntities();
       }
 })

 .state('entities1', {
    url: '/entities1',
    ...
    resolve: {
       data: function (xyzService) {
          return xyzService.listEntities();
       }
 })

并且这两个状态都需要或依赖于我从 xyzServce.listEntities() 返回的相同实体集合.这个服务方法从实体返回一个数组并返回一个承诺.

And both states require or depends on the same collection of entities, which I return from xyzServce.listEntities(). This service method from its side returns an array from entities and returns a promise.

所以我希望在使用它之前在控制器中有这个数据".当调用状态时第一次使用控制器的数据"时，一切都完美无缺.问题来了，当我首先打电话时在状态实体1"之后状态实体"，最后状态实体".因此，在状态 'entities' 的这一步，resolve 不会等待解决所有依赖项，并且在该状态的控制器中，我有没有数组元素的 'data' 和 $resolved 属性为 false 和一个空的 $promise 对象.

So I expect to have this 'data' in the controller before to use it. All works perfectly when to use the controller's 'data' for the fist time when the state is called. The problem comes, when I call for example first state 'entities' after that state 'entities1' and finally state 'entities'. So at this step in state 'entities' resolve does not wait to resolve all dependency and in the controller for this state I have 'data' with no array elements and $resolved property to false and an empty $promise object.

那么你能告诉我为什么会出现这种行为吗?我应该期望每次调用状态时都解决依赖关系，还是仅在第一次调用页面时才按规范工作?

So could you tell me why is this behavior? Should I expect each time when the state is called to have resolved the dependency, or this works by specification only for the first time when the page is called?

你能给我一些如何解决这个问题的想法吗?

Could you give me some ideas how to resolve this problem?

此致，

请求的服务示例:

    angular
        .module(SECURITY_MODULE)
        .factory('roleService', roleService);

    roleService.$inject = ['$resource', 'DOMAINS', 'notificationService', '$filter'];

    function roleService($resource, DOMAINS, notificationService, $filter) {
        var service = {
            ...
            listRoles: listRoles
            ...
        };

        var roleResource = $resource(DOMAINS.api + 'roles/:id/:command/:command2', {id : '@id'}, {
            ....
            'listRoles': {method: 'GET', isArray: true}
        });

        function listRoles(callbackSuccess, errorCallback) {
            var roles = roleResource.listRoles(function() {
                callbackSuccess && callbackSuccess(roles);
            }, function(error) {
                errorCallback && errorCallback(error);
            });

            return roles;
        }
....
    return service;
}

推荐答案

如文档中所列，资源立即返回一个值(空对象或空数组)，然后获取数据并稍后分配它.

As listed in the docs, the resource immediately returns a value (empty object or empty array), then fetches the data and later assigns it.

https://docs.angularjs.org/api/ngResource/service/$资源

重要的是要意识到调用 $resource 对象方法会立即返回一个空引用(取决于 isArray 的对象或数组).从服务器返回数据后，现有引用将填充实际数据.这是一个有用的技巧，因为通常资源被分配给一个模型，然后由视图呈现.

It is important to realize that invoking a $resource object method immediately returns an empty reference (object or array depending on isArray). Once the data is returned from the server the existing reference is populated with the actual data. This is a useful trick since usually the resource is assigned to a model which is then rendered by the view.

当直接在控制器内部使用时，这可以正常工作，但不适用于路由器的解析，因为对于路由器库，该值已经使用初始值解析.

This works fine when used directly inside a controller but doesn't work with the router's resolve, because for the router library, the value is already resolved with the initial value.

正如@Dmitriy 指出的那样，您应该使用资源的承诺，这是通过 $promise 字段提供的.在该值存在或发生错误之前，这不会解决.

So as @Dmitriy noted, you should use the promise of the resource, that is provided via the $promise field. This will not resolve before the value is present or an error occured.

有关更多详细信息，请参阅有关该主题的这篇很棒的文章:http://www.jvandemo.com/how-to-resolve-angularjs-resources-with-ui-router/

For more details see this great post on the topic: http://www.jvandemo.com/how-to-resolve-angularjs-resources-with-ui-router/

这篇关于Angular-UI 路由器 - 解决不等待承诺解决到期状态切换的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！