5

質問：

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

問題：

アプリケーションをロードすると、次のエラーが発生します。

キャッチされていないエラー: [$injector:cdep] 循環依存関係が見つかりました: $http <- $templateRequest <- $$animateQueue <- $animate <- $$interimElement <- $mdToast <- HttpError500Interceptor <- $http <- $templateFactory <- $view <- $state

4

3 に答える 3

5

過去に私を助けてくれた回避策の 1 つは$injector、構成時ではなく実行時に依存関係を取得するために使用することです。したがって、次のようなものです：

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

循環依存関係が問題を引き起こさない場合 (この場合はおそらくそうではありません)、これでうまくいきます。

于 2016-01-31T20:56:31.290 に答える
4

提供された解決策はどちらも役に立たなかったので、同じ問題を抱えている人がさまざまな回避策を使用できるように、私が行ったことをここに投稿します.

私が本当に望んでいたのは、名前付きの HTTP インターセプターを処理interceptorsし、モジュールから直接メッセージを表示する共通のコンポーネントを用意することでした。幸いなことに、最終的な解決策はより洗練されているため、$mdToastサービスの注入中にこのエラーがトリガーされました。

私が後で見つけた解決策は、すでに述べたが、問題に対する私の最初の修正よりもエレガントです。

  • という名前の HTTP インターセプターを処理するための共通コンポーネントを用意するにはinterceptors、
  • という名前のグローバル通知を処理するための共通コンポーネントを用意しnotifications-hubます。

次に、interceptorsモジュールで、次のようにグローバル イベントをトリガーします。

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

次に、notifications-hubモジュールでイベントに登録し$mdToast、通知サービスにエラーなしで挿入された を使用しました。

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

NotificationsHubServiceサービスが注入されてい$mdToastます。

結論：

この問題を解決するために、低レベルのインターセプターと通知サブシステムの間の接着剤としてグローバル イベントを使用しました。

うまくいけば、それは他の誰にも役立つでしょう。

于 2016-09-20T13:39:16.013 に答える
0

あなたがすべきことは、実行時にトースターを表示する関数を作成することです

  var getToaster = ()=>{

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

必要な場合にのみ呼び出すようになりました-これにより、依存関係の循環を回避できます

于 2016-03-03T09:03:37.140 に答える