Question

我在模块中有这个配置和控制器：

(function () {
  "use strict";
  angular.module("dashboard", ["ui.router",
      "clients",
      "sites",
      "regions",
      "beddingTypes",
      "geomindCommon",
    ])
    .config([
      "$stateProvider",
      function ($stateProvider) {
        $stateProvider
          .state("home", {
            url: "/Menu",
            templateUrl: "app/dashboard/templates/dashboard.tmpl.html",
            resolve: {
              client: ['$window', 'dashboardService', 'config', clientMapResolver],
            }
          });
      }
    ])
    .controller('dashboardController', ['$scope', 'config',
      function ($scope, config) {
        $scope.currClientId = config.currClient.id;
      }
    ])

  function clientMapResolver($window, dashboardService, config) {
    var layoutId = $window.parent.parent.parent.location.search.split('=')[1];
  }
})();

如您所见，我已在config州定义了解决方案。但决不会被触发，永远不会调用clientMapResolver函数。

更新也许这会导致问题：

项目是SPA项目。仪表板是主要模块。我注意到在我的索引页面中我有这样的说法：

<body ng-app="dashboard" ng-strict-di>
    <div ng-controller="dashboardController">
        <div class="sizeResponsive navbar navbar-green navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                      </button>
                </div>
            </div>
        </div>           
 </div>

任何想法为什么决不会被触发？

Answer 1

您可以调用类似的函数;

    url: "/home",
    templateUrl: "home.html",
    controller: "dashboardController",
    resolve:
            { fooList: function (fooResolver) 
               {
                 //Your Codes
                 return fooResolver.getList();
               }
            }

如果您希望Service-Factory可能是这样的话;

    app.factory("fooResolver", function () {
        this.getList= function () {
            return [{name:"foo"}]
        }
    });

Answer 2

您的问题是您的resolve数据块未映射到正确的数据类型。解析块的目的是为与该视图关联的控制器定义依赖关系。您没有在此代码中声明您的控制器 - 您需要定义一个与该解析相关联的控制器（请参阅the documentation）。完成此操作后，应将解决方案用于应用中未在其他位置定义的任何服务。所以你不需要解决＆＃34; $ window＆＃34;或类似的东西，只是已经存在的特殊价值观。因此"client"将是注入到您的控件中的依赖项的名称（匹配字符串＆＃34;客户端＆＃34;）以及与＆＃34;客户端＆＃34;相关联的值。被注入的是什么。因此，它需要映射到字符串（现有服务的名称）或将返回要注入的值的函数。请参阅文档：https://github.com/angular-ui/ui-router/wiki#resolve。

请注意，我也会劝阻任何类似于$window.parent.parent.parent.location.search的内容。如果你需要这样做，你真的有太多的iframe。

Answer 3

我同意@Maher，并且在问题中有许多未知的细节（dependencies），这使得难以调试。我继续简化@ 31piy提供的plunkr，让你明白问题所在。你说你的解决功能不起作用。虽然您的代码看起来很好，但我怀疑其他方面有问题。您可以尝试删除所有依赖项，使其适用于简单的场景并从那里构建。

任何想法为什么决不会被触发？

以下是使用您的代码触发解析功能的plunkr链接。现在继续逐个添加您的依赖项，以了解导致问题的确切原因。

这是简化代码的样子，

(function() {
  "use strict";
  angular.module('dashboard', ['ui.router'])
    .config(["$stateProvider", function($stateProvider) {
      var helloState = {
        name: 'home',
        url: '/Menu',
        templateUrl: 'dashboard.tmpl.html',
        resolve: {
          client:  [clientMapResolver]
        }
      }

      var aboutState = {
        name: 'about',
        url: '/about',
        template: '<h3>Its the UI-Router hello world app!</h3>'
      }

      $stateProvider.state(helloState);
      $stateProvider.state(aboutState);
    }]).controller('dashboardController', ['$scope',
      function ($scope) {
        console.log('Controller activated');
      }
    ]);

    function clientMapResolver() {
      alert("I was inside clientMapResolver");
    }
})();

以下是一些链接，可以阅读有关resolve的更多信息，以便您可以正确使用它们，希望这会有所帮助：

更新

我看到了你的编辑，但仍然很难看出resolve无法解雇的原因。从您的代码中疯狂猜测，我只能说，只有当您访问clientMapResolver路由时，才会触发您的解析函数home（网址将为/Menu）。为了实现这一点，我不知道你在哪里注入你的观点（<ui-view></ui-view>）。

就像我说的那样，你应该删除/注释掉大部分内容并检查基础案例并从那里开始构建，请确认你已经使用<ui-view></ui-view>注入了你的视图，这样你的路由器就知道了注入视图的位置并触发resolve。

Answer 4

嗯，你的代码对我来说似乎很合适。有些观点似乎是罪魁祸首，但总的来说，它们不应该导致resolve出现任何问题。

根据现有答案和您的代码，我的观察结果如下：

未解决的依赖项

我发现resolve函数中只有一个属性，即client。这进一步取决于3个组件。如果在解析client时没有解决任何依赖关系，那么控制台上应该有错误，我认为这不是问题，因为您还没有报告任何控制台错误。

除此之外，UI路由器的文档还定义了resolve中的简单函数将立即解决。因此，clientMapResolver不应该导致任何问题。它是一个简单的JavaScript函数，因此UI路由器将立即解决它。

悬空结尾逗号

虽然这是一个非常小的问题，但是诸如JSLint或ESLint之类的内容可能会引发错误并阻止在这种情况下编译代码。观察相关配置（如果有）。这行末尾有一个逗号：

client: ['$window', 'dashboardService', 'config', clientMapResolver],

删除它，然后重试。

我的建议

由于没有足够的信息来提供确切的解决方案，我最可能的猜测是为UI路由器的状态注册错误监听器，并观察它。如果UI路由器在访问状态时遇到任何问题，则会广播$stateChangeError。

你可以尝试听下面的内容：

angular.module("dashboard", [ ... ])
  .run(['$rootScope', function($rootScope) {
    $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) {
      console.log(event, toState, toParams, fromState, fromParams);
      console.error(error);
    });
  })
  .config( ... )
  // Your other code

当访问它时，它会在控制台上打印出错误路径的痕迹。

Answer 5

Resolve 是可以在控制器中注入的，所以Resolve需要返回一些东西来获取值或任何东西......

您也可以直接使用服务功能将解析返回值设为承诺，在这种情况下，您无需在app.config
中添加功能

我们必须使用解决？

有时我们需要确保在Controllers或Views等中绑定主题之前有一些数据，在这种情况下，我们使用resolve来收集所有数据，然后再将它们呈现在其他地方。

如果您在控制台中一无所获，请确保网址是正确的，在此示例中我将/Menu更改为/home，因此在网址中我localhost/#/home < / p>

var app = angular.module("dashboard", ["ui.router"]);

app.config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, urlRouterProvider) {
    urlRouterProvider.otherwise("home");
    $stateProvider.state("home", {
        url: "/home",
        templateUrl: "home.html",
        controller: "dashboardController",
        resolve: {
            client: ["service", clientMapResolver],
        }
    });


    function clientMapResolver(service) {
        return service.callMe();
    }
}
]);

app.controller("dashboardController", function (client) {
    console.log(client);
})

app.service("service", function () {
    this.callMe = function () {
        //var layoutId = $window.parent.parent.parent.location.search.split('=')[1];
        var  layoutId = "123",
        return layoutId;
    }
});

请在投票前免费提问我

为什么解决不会在配置中触发？

5 个答案:

更新

未解决的依赖项

悬空结尾逗号

我的建议