在 Angular 路由中解决承诺时未填充 $state

Question

我遇到了这种情况，我可以看到 $stateParams 被填充在一个地方，但没有在另一个地方。我是 angular-ui-router 的新手，因此将不胜感激。谢谢！

在以下状态的解析块中，我将 $stateParams 作为数据“campaign”函数中的依赖项注入，并且填充了 $stateParams。

.state('campaign', {
          url: "/campaign/{campaignId:int}",
          templateUrl: campaign_template,
          controller: 'CampaignCtrl',
          parent: 'org',
          abstract: true,
          resolve: {
            campaign: function(CampaignService, $stateParams) {

              console.log('$stateParams is populated here!', $stateParams)

              return CampaignService.get($stateParams.campaignId)
                .then(function(campaign) {
                  return campaign;
                });

            }
          }

然而，在 CampaignService 函数中，我需要 $stateParams 但它是 空的。我很困惑，因为我假设因为当我将它注入 解决块，无论我在哪里再次得到它都应该是一样的。

  .service('CampaignService', function($injector, $q) {
            this.get = function() {
              var $stateParams = $injector.get('$stateParams');

              console.log('$stateParams is empty here!', $stateParams);

              var deferred = $q.defer();
              setTimeout(function() {
                deferred.resolve({
                  name: 'campaignName'
                });
              }, 1000);

              return deferred.promise;
            }
          })

Answer 1

我假设因为它是在我将它注入到解析块中时填充的，所以无论我在哪里再次得到它，它都应该是相同的。

注入解析块的$stateParams 是提议的未来 状态。在那个时间点，应用程序仍在使用旧状态。如果任何解决承诺被拒绝，将保持旧状态。

在后台，$state 服务会创建一个本地版本的 $stateParams，并将其注入到 resolve 函数中：

  var $stateParams = (paramsAreFiltered) ? params : filterByKeys(state.params.$$keys(), params);
  var locals = { $stateParams: $stateParams };

  // Resolve 'global' dependencies for the state, i.e. those not specific to a view.
  // We're also including $stateParams in this; that way the parameters are restricted
  // to the set that should be visible to the state, and are independent of when we update
  // the global $state and $stateParams values.
  dst.resolve = $resolve.resolve(state.resolve, locals, dst.resolve, state);
  var promises = [dst.resolve.then(function (globals) {
    dst.globals = globals;
  })];

——https://github.com/angular-ui/ui-router/blob/legacy/src/state.js#L1427-L1437

解决方案是将提议的未来$stateParams 传递给服务。

Answer 2

您的服务可能不应该关心状态参数。您已经在状态定义中传递了 campaignId 值，因此为了在服务中使用它，您可以像这样修改它：

.service('CampaignService', function($injector, $q) {
    this.get = function(campaignId) {

        console.log('campaignId = ' + campaignId);

        var deferred = $q.defer();
        setTimeout(function() {
            deferred.resolve({
                name: 'campaignName'
            });
        }, 1000);

        return deferred.promise;
    }
})