AngularJS UI路由器未按顺序执行未指定的解析依赖项

Question

我目前遇到了一个问题，即 UI 路由器如何处理它加载解析的顺序。我想要完成的最终目标是让服务加载并存储数据，并且只加载（请求）一次数据，然后通过服务访问。

我目前的实现方式遵循以下模式：

在更高级别的状态解析中，告诉服务加载其数据。解析的结果不是子服务的依赖，因为数据是通过在控制器中注入服务来访问的。 子状态解析可能取决于在先前状态中已“准备好”的服务 当您通常单击应用程序（即状态 a -> 状态 a.b -> 状态 a.b.c）时，这非常有用，但是当您直接进入嵌套状态（状态 a.b 或状态 a.b.c）时，它会崩溃。出现此问题的原因是，如果子状态未将父状态的解析指定为依赖项，则 UI 路由器将无法确保执行顺序解析。请参见下面的示例：

app.config(function($stateProvider) {

  $stateProvider
  .state('a', {
    url: "/a",
    resolve: {
      data: function(service) {
        return service.getData(); // makes network request
      }
    }
  })
  .state('a.b', {
    url :"/b",
    resolve: {
      specificData: function(service) { // if you add data as a dependency here, it works fine
        return service.useDataToGetSpecificData(); // doesn't make network request
      }
    }
  })

});

在示例中，如果用户直接进入状态 a.b，则 specificData 解析将失败。 service.useDataToGetSpecificData 不发出网络请求并访问当前存储在服务中的数据。此调用失败，因为状态 a 的解析尚未完成，因为它是网络请求。

一个解决方案是让服务处理它还没有数据的情况，并通过等待它有数据来管理它，但这对于服务将要做什么来说感觉有点夸大其词，并且似乎失败了UI路由器的重点。

另一个解决方案（我目前正在使用的）是添加“数据”作为状态 a.b 中解析的依赖项，即使它没有被使用。这迫使 a.b 等待 a 完成其解析，并且一切正常。但是，这感觉像是一种 hack，而且非常不直观。任何在不知情的情况下查看此代码的人都会对为什么在 a.b 的解析中声明这个未使用的变量感到头疼。

如果不指定依赖项，则无法保证解析的顺序是编写 UI 路由器的行为方式，所以我觉得我一定是在做一些奇怪/错误的事情。

Answer 1

另一个解决方案（我目前正在使用的）是添加“数据”作为状态 a.b 中解析的依赖项，即使它没有被使用。这迫使 a.b 等待 a 完成其解析，并且一切正常。但是，这感觉像是一种 hack，而且非常不直观

这是执行此操作的常见方法。我通常这样做是为了向一条路线添加多个顺序解析。例如，我经常添加一个 attachUser 钩子，它从 HTTP GET 请求返回一个承诺，然后添加另一个 isLoggedIn，它具有 attachUser 作为依赖项。我搜索了很多，从来没有找到更好的。除了 angular 的注入器之外，在 ui-router 中没有为这种情况写什么特别的东西。即使您的情况因继承而特殊，这与here 和here 完全相同。

所以我觉得我一定是在做一些奇怪/错误的事情。

你不是。这很可能被认为很奇怪/错误

Answer 2

我有一个类似的场景，它对我有用，就像你想要的那样。我的配置是这样的（以你的配置为基础）：

app.config(function ($stateProvider) {
   $stateProvider
   .state('root', {
      abstract: true,
      resolve: {
         data: function (service) {
            return service.getData(); // makes network request
         }
      }
   })
   .state('a', {
      url: "/a",
      parent:'root',
      resolve: {
         data: function (data) {
            return data; 
         }
      }
   })
   .state('b', {
      url: "/b",
      parent:'a',
      resolve: {
         specificData: function (service) { 
            return service.useDataToGetSpecificData(); 
         }
      }
   })
});

在我的情况下，不同之处在于抽象的“根”状态，无论请求的 url 是什么，我都需要加载一些全局数据。你能试试这种方法吗？