在拦截器中使用“$mdToast”触发循环依赖
Using `$mdToast` inside an interceptor triggering circular dependency
>问题:
如何在拦截器中使用$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 <美元-><-><美元><-><-><-><-> 美元>美元->
过我的一种解决方法是使用 $injector
在运行时而不是在配置时获取依赖项。所以,像这样:
/* @ngInject */
function HttpError500Interceptor($q,
$injector,
$filter) {
function responseError(responseError) {
var $mdToast = $injector.get('$mdToast');
当你的循环依赖不会导致问题时,在这种情况下可能不会,这将解决问题。
提供的解决方案都不适合我,所以我在这里发布我所做的,以便任何有相同问题的人都可以使用一系列解决方法。
我真正想要的是有一个通用组件来处理名为 interceptors
的 HTTP 拦截器并直接从模块显示消息,幸运的是,由于最终解决方案更加优雅,它在注入 $mdToast
服务时触发了此错误。
我后来提出的解决方案(我已经说过(比我对该问题的第一个解决方案更优雅:
- 有一个通用组件来处理名为
interceptors
的 HTTP 拦截器, - 具有一个名为
notifications-hub
的通用组件来处理全局通知。
然后,在interceptors
模块中,我使用以下命令触发一个全局事件:
$rootScope.$broadcast('notifications:httpError', responseError);
然后,在notifications-hub
模块中,我在事件上注册并使用了 $mdToast
,它在通知服务中注入而没有错误:
$rootScope.$on('notifications:httpError', function (event, responseError) {
NotificationsHubService.processErrorsAndShowToast(responseError);
});
NotificationsHubService
是服务注入$mdToast
。
结论:
我使用全局事件作为低级拦截器和通知子系统之间的粘合剂来克服这个问题。
希望它对其他人有用。
你应该做的是创建一个函数,在运行时为你带来烤面包机
var getToaster = ()=>{
var toaster = $injector.get('$mdToaster');
return toaster;
}
现在只在需要时调用它 - 这将提供围绕依赖循环的工作
- 在自定义mean.io包中使用angular-chart.js作为依赖项
- 为什么Airbnb风格指南说不鼓励依赖函数名称推断
- 将依赖外部库的UMD模块与browserfy捆绑在一起
- 如何将本地依赖项添加到npm项目中
- 如何在内联依赖项并将图像转换为dataURI的情况下完全提取网页
- jquery中的复选框依赖项
- 为什么react/redux前端项目在package.json中包含生产依赖项
- 单元测试依赖关系没有被嘲笑
- 依赖<选择>HTML和JavaScript菜单
- FRP 中 EventStreams 的循环依赖关系
- 节点模块依赖关系
- 使用多个依赖项加载只进行一次AJAX调用
- 限制npm依赖模块's require(隔离)的用法
- AngularJS依赖注入定时问题
- 在Meteor中使用具有依赖关系的NPM包
- Dojo AMD加载程序执行定义具有空/缺失依赖项的回调
- 依赖于缓慢加载javascript的UI
- 将新行打印到$mdToast
- AngularJS或jquery中的依赖级联下拉框列表
- 在拦截器中使用“$mdToast”触发循环依赖