Aktualisierung aller API-Anfragen mit ui-router stateParams und einem Interceptor

Question

Ich habe eine Angular-Anwendung, die dieselben Vorlagen für mehrere Standorte wiederverwendet. Die Urls in etwa so aussehen:

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

Und ich habe einen Zustand Setup, die einen Ort param, die als ihre Eltern meine anderen Routen festgelegt aufstellt:

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

Innerhalb dieser Seitenvorlagen ich mehrere Komponenten haben, die API-Anfragen stellen Was ich möchte, ist mit dem api abfangen alle HTTP-Anfragen zu tun und den Standort-ID auf der Grundlage der Lage Immobilie in $ stateParams setzt:

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'); 
} 

Leider gibt mir eine zirkuläre Abhängigkeit:

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

Ich glaube, dass ich die zirkuläre Abhängigkeit mit dem $ injector direkt umgehen konnte, aber ich habe gelesen, dass das Problem wahrscheinlich darin liegt, dass Sie wahrscheinlich ein Architekturproblem haben. Gibt es eine bessere Möglichkeit, die Standort-ID zu erhalten, ohne Code für einzelne API-Anfragen duplizieren zu müssen?

Answer 1

Für zirkuläre Abhängigkeiten können Sie einen Dienst manuell injizieren $injector

versuchen

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