Question

我有一个Angular应用程序，它为多个位置重用相同的模板。网址看起来像：

/locations/location1/
/locations/location2/
/locations/location1/about
/locations/location2/about

我有一个州设置，设置一个位置参数，我的其他路由设置为其父级：

$stateProvider
  .state('root', {
    url: '/locations/{location:[^/]*}',
    abstract: true,
    template: '<ui-view/>'
  });

在这些页面模板中，我有几个发出API请求的组件。我想做的是拦截所有对api的http请求，并根据$ stateParams中的location属性添加位置id：

function apiInterceptor ($stateParams) {
  return {
    request: (config) => {
      config.url = $stateParams.location + '/' + config.url;
      return config;
    }
  };
}

module
.factory('apiInterceptor', apiInterceptor)
.config(function($httpProvider {
  $httpProvider.interceptors.push('apiInterceptor');
}

不幸的是，这给了我一个循环依赖：

ng1UIRouter <- $stateParams <- apiInterceptor <- $http <- ng1UIRouter

我相信我可以直接使用$ injector解决循环依赖，但我已经读过，遇到这个问题意味着你可能遇到某种架构问题。是否有更好的方法来获取位置ID而不会为各个api请求重复代码？

Answer 1

对于循环依赖关系，您可以使用$injector

手动注入服务

试

function apiInterceptor ($injector) {
  var $stateParams = $injector.get('$stateParams');
  return {
    request: (config) => {
      config.url = $stateParams.location + '/' + config.url;
      return config;
    }
  };
}

使用ui-router stateParams和拦截器更新所有api请求

1 个答案: