Angular ui-router 中的 Promise 依赖解析顺序

2023-09-30前端开发问题
1

本文介绍了Angular ui-router 中的 Promise 依赖解析顺序的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

我已经设置了一个顶级控制器,它仅在成功解决承诺(由 Config 工厂返回)时实例化.该承诺基本上是下载 Web 应用配置,带有 RESTful 端点等.

I have set up a top-level controller that is instantiated only when a promise (returned by a Config factory) is successfully resolved. That promise basically downloads the Web app configuration, with RESTful endpoints and so on.

$stateProvider
  .state('app', {
    url: '/',
    templateUrl: 'views/_index.html',
    controller: 'MainCtrl',
    resolve: {
      config: 'Config'
    }
  });

此设置允许我在任何较低的控制器有机会使用它之前断言配置已正确加载.

This setup allows me to kind-of assert that the configuration is properly loaded before any lower controller gets a chance to use it.

现在我需要在更深的嵌套控制器中注入另一个 factory,它使用 Config 并且仅在它被解析时才起作用(看它像 $resource 包装器,需要一些 Web 服务 URL).如果我这样做:

Now I need to inject, in a deeper nested controller, another factory that uses Config and only works when it is resolved (look at it like a $resource wrapper that needs some Web service URLs). If I do:

$stateProvider
  .state('app.bottom.page', {
    url: '/bottom/page',
    templateUrl: 'views/_a_view.html',
    controller: 'BottomLevelCtrl',
    resolve: {
      TheResource: 'MyConfigDependingResource'
    }
  });

看起来 resolve 评估顺序不是从上到下,而是从下到上,因此:

it looks like the resolve evaluation order does not follow the controller hierarchy from top to bottom, but from bottom to top, therefore:

  1. app.bottom.page 已输入
  2. ui-router尝试解析MyConfigDependingResource,但是注入失败,因为 Config 从未被初始化过
  3. ui-router 解析因错误而停止(甚至没有抛出 Error,但这是另一个问题),并且 Config 是从未被顶级控制器初始化
  1. app.bottom.page is entered
  2. ui-router attempts to resolve MyConfigDependingResource, but the injection fails, because Config has never been initialized
  3. The ui-router resolution stops because of an error (without even throwing Errors, but that's another issue), and Config is never initialized by the top level controller

为什么 ui-router 以相反的顺序解析依赖关系?如何轻松解决我的 TheResource 对象 顶级 MainCtrl 已解决 Config (不依赖 $inject,当然)?

Why is ui-router resolving dependencies in a reverse order? How can I easily resolve my TheResource object after the top level MainCtrl has resolved Config (without relying on $inject, of course)?

更新:从 这个 plnkr 的日志你可以看到只有在嵌套控制器开始自己的解析过程后才会尝试顶级 resolve.

UPDATE: from this plnkr's log you can see that the top level resolve is attempted only after the nested controller has started its own resolving process.

推荐答案

类似于@Kasper Lewau 的回答,可以指定对单个状态的解析的依赖.如果您的一个解析依赖于同一解析块中的一个或多个解析属性.在我的情况下 checkS 依赖于另外两个解决方案

Similarly to @Kasper Lewau's answer, one may specify a dependency on resolves withing a single state. If one of your resolves depends on one or more resolve properties from the same resolve block. In my case checkS relies on two other resolves

.state('stateofstate', {
    url: "/anrapasd",
    templateUrl: "views/anrapasd.html",
    controller: 'SteofsteCtrl',
    resolve: {
        currU: function(gamMag) {
            return gamMag.checkWifi("jabadabadu")
        },
        userC: function(gamUser, $stateParams) {
            return gamUser.getBipi("oink")
        },
        checkS: ['currU', 'userC', 'gamMag', function(currU, userC, gamMag) {
            return gamMag.check(currU, userC);
        }]
    }
})

<小时>

**PS:**检查以下文档 了解更多关于 resolve 的内部工作原理.


**PS: **Check the "Resolves" section of the following document for more details about the inner-workings of resolve.

这篇关于Angular ui-router 中的 Promise 依赖解析顺序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

The End

相关推荐

js删除数组中指定元素的5种方法
在JavaScript中,我们有多种方法可以删除数组中的指定元素。以下给出了5种常见的方法并提供了相应的代码示例: 1.使用splice()方法: let array = [0, 1, 2, 3, 4, 5];let index = array.indexOf(2);if (index -1) { array.splice(index, 1);}// array = [0,...
2024-11-22 前端开发问题
182

JavaScript小数运算出现多位的解决办法
在开发JS过程中,会经常遇到两个小数相运算的情况,但是运算结果却与预期不同,调试一下发现计算结果竟然有那么长一串尾巴。如下图所示: 产生原因: JavaScript对小数运算会先转成二进制,运算完毕再转回十进制,过程中会有丢失,不过不是所有的小数间运算会...
2024-10-18 前端开发问题
301

JavaScript(js)文件字符串中丢失"\"斜线的解决方法
问题描述: 在javascript中引用js代码,然后导致反斜杠丢失,发现字符串中的所有\信息丢失。比如在js中引用input type=text onkeyup=value=value.replace(/[^\d]/g,) ,结果导致正则表达式中的\丢失。 问题原因: 该字符串含有\,javascript对字符串进行了转...
2024-10-17 前端开发问题
437

layui中table列表 增加属性 edit="date",不生效怎么办?
如果你想在 layui 的 table 列表中增加 edit=date 属性但不生效,可能是以下问题导致的: 1. 缺少日期组件的初始化 如果想在表格中使用日期组件,需要在页面中引入 layui 的日期组件,并初始化: script type="text/javascript" src="/layui/layui.js"/scrip...
2024-06-11 前端开发问题
455

Rails/Javascript:如何将 rails 变量注入(非常)简单的 javascript
Rails/Javascript: How to inject rails variables into (very) simple javascript(Rails/Javascript:如何将 rails 变量注入(非常)简单的 javascript)...
2024-04-20 前端开发问题
5

CoffeeScript 总是以匿名函数返回
CoffeeScript always returns in anonymous function(CoffeeScript 总是以匿名函数返回)...
2024-04-20 前端开发问题
13