Обновление всех запросов api с использованием ui-router stateParams и перехватчика

Question

У меня есть Угловое приложение, которое повторно использует те же шаблоны для нескольких местоположений. В URLs выглядеть примерно так:

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

И у меня есть установка состояния, которая устанавливает местоположение параметров, которые другие мои маршруты установить в качестве родителя:

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

В пределах этих шаблонов страниц у меня есть несколько компонентов, сделать запросы API. То, что я хотел бы сделать, это перехват всех запросов HTTP к апи и предварять идентификатор местоположения на основе свойства местоположения в $ stateParams:

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 

Я верю, что могу обойти круговую зависимость, используя напрямую инжектор $, но я прочитал, что выполнение этой проблемы означает, что у вас, вероятно, есть какая-то проблема архитектуры. Есть ли лучший способ получить идентификатор местоположения без дублирования кода для отдельных запросов api?

Answer 1

Для круговых зависимостей можно вручную вводить услугу с помощью $injector

попробовать

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