在触发循环依赖的拦截器中使用“$mdToast”

Question

问题：

如何在拦截器中使用 $mdToast 而不触发错误？

设置：

拦截器定义：

(function () {
  'use strict';

  angular
    .module('app.components.http-errors-interceptors')
    .factory('HttpError500Interceptor', HttpError500Interceptor);

  /* @ngInject */
  function HttpError500Interceptor($q,
                                   $mdToast,
                                   $filter) {

    var interceptor           = {};
    interceptor.responseError = responseError;

    function responseError(responseError) {
      if (responseError.status === 500) {
        $mdToast.show($mdToast.simple()
                              .content($filter('translate')('APP.COMPONENTS.HTTP_ERRORS_INTERCEPTORS.500'))
                              .position('bottom right')
                              .hideDelay(5000));
      }
      return $q.reject(responseError);
    }

    return interceptor;
  }
})();

拦截器配置：

(function () {
  'use strict';

  angular
    .module('app.components.http-errors-interceptors')
    .config(moduleConfig);

  /* @ngInject */
  function moduleConfig($httpProvider) {
    $httpProvider.interceptors.push('HttpError500Interceptor');
  }
})();

问题：

当我加载应用程序时，它触发了以下错误：

Uncaught Error: [$injector:cdep] Circular dependency found: $http <- $templateRequest <- $$animateQueue <- $animate <- $$interimElement <- $mdToast <- HttpError500Interceptor <- $http <- $templateFactory <- $view <- $state

Answer 1

过去对我有帮助的一个解决方法是使用 $injector 在运行时而不是在配置时获取依赖项。所以，像这样：

  /* @ngInject */
  function HttpError500Interceptor($q,
                                   $injector,
                                   $filter) {
    function responseError(responseError) {
      var $mdToast = $injector.get('$mdToast');

当您的循环依赖不会导致问题时（在本例中可能不会），这就可以解决问题。

Answer 2

您应该做的是创建一个函数，在运行时间

为您提供烤面包机

  var getToaster = ()=>{

    var toaster = $injector.get('$mdToaster');
    return toaster;
}

现在只在需要时调用它 - 这将解决依赖循环

Answer 3

所提供的解决方案都不适合我，所以我将我所做的发布在这里，以便遇到相同问题的任何人都可以使用一系列解决方法。

我真正想要的是有一个通用组件来处理名为 interceptors 的 HTTP 拦截器，并直接从模块中显示消息，令人高兴的是，由于最终解决方案更优雅，它触发了这个错误，同时注入 $mdToast 服务。

我后来的解决方案，我已经说过了，比我第一次解决这个问题更优雅：

拥有一个通用组件来处理名为 interceptors、
拥有一个通用组件来处理名为 notifications-hub 的全局通知。

然后，在 interceptors 模块中，我触发了一个全局事件：

$rootScope.$broadcast('notifications:httpError', responseError);

然后，在 notifications-hub 模块中，我注册了事件并使用了 $mdToast，它被无误地注入到通知服务中：

$rootScope.$on('notifications:httpError', function (event, responseError) { NotificationsHubService.processErrorsAndShowToast(responseError); });

NotificationsHubService 是服务注入 $mdToast.

结论：

我使用全局事件作为低级拦截器和通知子系统之间的粘合剂来解决这个问题。

希望它对其他人有用。

在触发循环依赖的拦截器中使用“$mdToast”

Using `$mdToast` inside an interceptor triggering circular dependency

javascript

circular-dependency

angularjs

angular-http-interceptors

angularjs-material