Question

我查看了我在网上找到的每个例子，但都无法解决这个问题。我们正在使用TypeScript和AngularJs。无论我们做了哪些更改，我都会继续收到未知的提供程序错误。因为它是一个httpInterceptor，我将它绑定到Application.TS并将调用放在_Layout.cshtml中。谢谢你的帮助！

这是我的Application.TS文件

/// <reference path='../Typescript/angularjs/angular.d.ts' />
/// <reference path='../Typescript/angular-growl-v2/angular-growl-v2.d.ts' />
/// <reference path="Controllers/PendingRequests.ts" />

module TrainingTrackerAdmin {
    import ILocationProvider = ng.ILocationProvider;
    import ICompileProvider = ng.ICompileProvider;
    import IGrowlProvider = ng.growl.IGrowlProvider;
    import IHttpProvider = ng.IHttpProvider;
    import IPendingRequests = PendingRequests.IPendingRequests;

    var myApp = angular.module('trainingTrackerAdmin', ['ngAnimate', 
'ui.bootstrap', 'ui.tree', 'angular-growl']);

myApp.controller(
  "AppController",
  function ($scope: any, $http: any, pendingRequests: IPendingRequests) {
    $scope.PendingRequests = pendingRequests; 
  }
);
myApp.config([
  '$locationProvider', '$compileProvider', 'growlProvider', '$httpProvider',
      ($location: ILocationProvider, $compile: ICompileProvider, growl: 
IGrowlProvider, $httpProvider: IHttpProvider, pendingRequests: 
IPendingRequests) => {
            $location.html5Mode(true);
            $httpProvider.defaults.cache = false;
          //turn off caching for admin
            $httpProvider.defaults.headers.get = { 'Cache-Control': 'no-
cache', 'Pragma': 'no-cache' }; 
            $compile.debugInfoEnabled(true);
            growl.onlyUniqueMessages(false)
                .globalTimeToLive(5000)
              .globalDisableCountDown(true);

            function interceptHttp($q: any, pendingRequests: 
IPendingRequests) {
              function interceptRequest(config: any) {
                alert('interceptRequest');
                pendingRequests.startRequest();
                return config;
              }

              function interceptRequestError(rejection: any) {
                alert('interceptRequest');
                pendingRequests.startRequest();
                return $q.reject(rejection);
              }

              function interceptResponse(response: any) {
                alert('interceptRequest');
                pendingRequests.endRequest();
                return response;
              }

              function interceptResponseError(response: any) {
                alert('interceptRequest');
                pendingRequests.endRequest();
                return $q.reject(response);
              }

              return {
                request: interceptRequest,
                requestError: interceptRequestError,
                response: interceptResponse,
                responseError: interceptResponseError
              };
            }

            $httpProvider.interceptors.push(interceptHttp);
        }
    ]);
}

这是它引用的类：

module TrainingTrackerAdmin.PendingRequests {

  export interface IPendingRequests {
    startRequest(): void;
    endRequest(): void;
    any: boolean;
    none: boolean;
  }

export class PendingRequests implements ng.IServiceProvider, IPendingRequests 
{
private requests: number;
constructor() {
  this.requests = 0;
}
public startRequest(): void {
  this.requests++;
  console.log(`pendingRequests : ${this.requests}`);
}
public endRequest(): void {
  this.requests--;
  console.log(`pendingRequests : ${this.requests}`);
}
public get any(): boolean {
  console.log(`${this.requests} !== 0 :${this.requests !== 0} `);
  return this.requests !== 0;
}
public get none(): boolean {
  console.log(`${this.requests} === 0 :${this.requests === 0} `);
  return this.requests === 0;
}
$get(): IPendingRequests {
  return this;
}
}
angular.module('trainingTrackerAdmin').provider('PendingRequests', 
PendingRequests)
.config(['PendingRequestsProvider', function (PendingRequests: 
ng.IServiceProvider) {
}]);
}

它的html在_Layout.cshtml中调用，如下所示：`

<div class="loadingBackground"  ng-show="pendingRequests.any">
<div class="loadingCell">
  <p class="loadingImage"> </p>
  <p>
    <strong>Loading</strong>
  </p>
</div>

Answer 1

您的实际提供商名称为PendingRequests，但您在控制器依赖项中使用pendingRequests。注入器是大小写的，因此您应该使用pendingRequests作为提供者名称（根据styleguide）。此外，您的控制器依赖项为not minification-safe

---------- ---------更新

还有另一个问题：

myApp.config([
  '$locationProvider', '$compileProvider', 'growlProvider', '$httpProvider',
      ($location: ILocationProvider, $compile: ICompileProvider, growl: 
IGrowlProvider, $httpProvider: IHttpProvider, pendingRequests: 
IPendingRequests) => {
............

您无法将服务注入.config，只能提供商。所以一定是

myApp.config([
  '$locationProvider', '$compileProvider', 'growlProvider', '$httpProvider', 'pendingRequestsProvider', 
      ($location: ILocationProvider, $compile: ICompileProvider, growl: 
IGrowlProvider, $httpProvider: IHttpProvider, pendingRequestsProvider: 
IPendingRequests) => {
............

angular.js：68未捕获错误：[$ injector：unpr]未知提供者：pendingRequestsProvider＆lt; - pendingRequests＆lt; - $ http＆lt; - $ templateRequest＆lt; - $ compile

1 个答案: