Angular $injector 可以用 $provide.decorator 装饰吗？

Question

也许这是一个糟糕的想法，但如果是这样，请告诉我原因，然后假装这是一项不会在生产中看到曙光的学术活动。

我想为 Angular $injector 服务添加一些逻辑，以监控某些服务何时注入其他服务。由于 Angular 似乎提供了一种装饰服务的机制，我认为这将是要走的路。但是，以下代码会引发错误。

(function () {
    'use strict';

    var app = angular.module('app');

    app.config(['$provide', function ($provide) {
        $provide.decorator('$injector', ['$log', '$delegate', addLoggingToInjector]);
    }]);

    function addLoggingToInjector($log, $delegate) {
        var baseInstantiate = $delegate.instantiate;
        var baseInvoke = $delegate.invoke;

        $delegate.instantiate = function (type, locals) {
            // $log.debug('Calling $injector.instantiate');

            baseInstantiate(type, locals);
        };

        $delegate.invoke = function (fn, self, locals) {
            // $log.debug('Calling $injector.invoke');

            baseInvoke(fn, self, locals);
        };

        return $delegate;
    };
})();

具体错误是：

未捕获的错误：[$injector:modulerr] 无法实例化模块应用程序 由于：错误：[$injector:unpr] 未知提供者：$injectorProvider

Answer 1

答案是：没有。

---

$provide.decorator 用于拦截服务创建 - 这就是为什么它从.config 块调用，当还有时间配置所有服务时，因为它们都没有被创建. $provide.decorator 基本上获得了服务的Provider 并将其$get 与新交付的decorFn 交换。

$injector 不像其他服务。它被创建为bootstrapping 应用程序的第一步——在调用app.config 之前。 [查看函数：角度源代码中的bootstrap和createInjector]

但是，您可以通过稍微调整源代码来轻松实现您的目标 :-) 特别是查看function invoke(fn, self, locals)。

---

更新我从@KayakDave 获得了一些灵感。您实际上不必深入研究源代码本身。您可以使用以下模式来观察对任何$injector 方法的每次调用：

 app.config(['$injector', function ($injector) {

      $injector.proper =
      {
          get : $injector.get,
          invoke : $injector.invoke,
          instantiate : $injector.instantiate,
          annotate : $injector.annotate,
          has : $injector.has
      }

      function getDecorator(serviceName)
      {
          console.log("injector GET: ", serviceName);
          return this.proper.get(serviceName);
      }

      function invokeDecorator(fn, self, locals)
      {
          console.log("injector INVOKE: ", fn, self, locals);
          return this.proper.invoke(fn, self, locals);
      }

      function instantiateDecorator(Type, locals)
      {
          console.log("injector INSTANTIATE: ", Type, locals);
          return this.proper.instantiate(Type, locals);
      }

      function annotateDecorator (fn)
      {
          console.log("injector ANNOTATE: ", fn);
          return this.proper.annotate(fn);
      }

      function hasDecorator(name)
      {
          console.log("injector HAS: ", name);
          return this.proper.has(name);
      }

      $injector.get = getDecorator;
      $injector.invoke = invokeDecorator;
      $injector.instantiate = instantiateDecorator;
      $injector.annotate = annotateDecorator;
      $injector.has = hasDecorator;
  }]);

---

PLNKR

Answer 2

你不能在 $injector 上使用 Angular 装饰器服务。正如 Artur 所说，$injector 与其他服务有点不同。但是我们可以创建自己的装饰器。

为什么我们不能使用 Angular 的装饰器

在代码级别，问题在于 $injector 没有构造函数 - 没有 $injectorProvider。

例如，这两个都返回 true：

$injector.has('$location');
$injector.has('$locationProvider') 

但是，虽然这会返回 true：

$injector.has('$injector')

这返回假：

$injector.has('$injectorProvider')

我们看到Angular decorator函数的重要性：

function decorator(serviceName, decorFn) {
   var origProvider = providerInjector.get(serviceName + providerSuffix),
       orig$get = origProvider.$get;

   origProvider.$get = function() {
      var origInstance = instanceInjector.invoke(orig$get, origProvider);
     return instanceInjector.invoke(decorFn, null, {$delegate: origInstance});
   };
}

和

providerSuffix = 'Provider'

所以 Angular 装饰器期望在服务的构造函数 (serviceName + providerSuffix) 上进行操作。务实地说，因为我们没有$injectorProvider，所以我们不能使用装饰器。

解决方案

我们可以做的是自己覆盖Angular注入器的get function，将注入器的默认get替换为调用原始的、Angular定义的get，后跟我们的函数。

我们将把它应用到$injector，而不是像这样不存在的$injectorProvider：

app.config(['$provide','$injector', function ($provide,$injector) {

    // The function we'll add to the injector
    myFunc = function () {
        console.log("injector called ", arguments);
    };

    // Get a copy of the injector's get function
    var origProvider = $injector,
        origGet = origProvider.get;

    //Override injector's get with our own
    origProvider.get = function() {

        // Call the original get function 
        var returnValue = origGet.apply(this, arguments);

        // Call our function
        myFunc.apply(this,arguments);

        return returnValue;
    }
}]);

您会看到注入的提供程序是第一次扩充，因此app.value('aValue', 'something'); 产生以下日志语句：

injector called  ["aValueProvider"]

Demo fiddle