为什么Global Error Handler中的烤箱服务在Angular4 / 5/6中不起
发布时间：2020-12-17 17:30:15 所属栏目：安全 来源：网络整理
导读：我的要求是通过在app组件加载之前调用Two Rest Api来加载一些数据.如果API给出任何错误,则在Toaster(angular2-toaster)中显示消息. 在加载app组件之前,下面的AppLoadService会执行 import { Injectable } from '@angular/core';import { HttpClient } from '
|
我的要求是通过在app组件加载之前调用Two Rest Api来加载一些数据.如果API给出任何错误,则在Toaster(angular2-toaster)中显示消息.
在加载app组件之前,下面的AppLoadService会执行 import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import 'rxjs/add/operator/toPromise';
import { APP_SETTINGS } from 'app/app-settings/settings';
@Injectable()
export class AppLoadService {
constructor(private httpClient: HttpClient) { }
loadLabs(): Promise<any> {
return new Promise((resolve,reject) => {
this.httpClient.get(`/api/v1/api/lab`)
.toPromise()
.then((res: any) => {
APP_SETTINGS.labs = res;
resolve();
})
.catch((err: any) => {
reject(err);
});
});
}
/////////////////******************////////////////////////////
getSettings(): Promise<any> {
return new Promise((resolve,reject) => {
this.httpClient.get(`assets/settings/config.json`)
.toPromise()
.then((config: any) => {
APP_SETTINGS.loginURL = config["login"];
console.log(`config.json loaded:: `,APP_SETTINGS);
resolve();
})
.catch((err: any) => {
reject(err);
});
});
}
我的App模块文件如下所示 export function createTranslateLoader(http: Http) {
return new TranslateStaticLoader(http,'./assets/i18n','.json');
}
@NgModule({
declarations: [
AppComponent,CustomDateRangePickerComponent
],imports: [
// coreModules: //
BrowserModule,BrowserAnimationsModule,ToasterModule,HttpClientModule,FormsModule,CommonModule,//<====added
//thirdPartyModules:
// ToastyModule,BootstrapModalModule,//appModules: //
AppRoutingModule,FooterModule,ErrorModule,AccessDeniedModule,NotFoundModule,AppLoadModule,//Startupdata before APP loaded
RouterModule.forRoot([]),TranslateModule.forRoot({ provide: TranslateLoader,useFactory: (createTranslateLoader),deps: [Http] })
],providers: [
ToasterService,StartupService,ResponseStatusesService,LocalStorageService,ApplicationSettingsService,LabSelectionService,AccountService,AuthService,AlertService,AuthGuard,RolesGuard,FeaturebasedGuard,ErrorLogService,{
provide: ErrorHandler,useClass: GlobalErrorsHandler
},{
provide: HTTP_INTERCEPTORS,useClass: AppHttpInterceptor,multi: true
},{
provide: LocationStrategy,useClass: HashLocationStrategy
},],exports: [TranslateModule],bootstrap: [AppComponent]
})
export class AppModule { }
GlobalErrorHandler.ts @Injectable()
export class GlobalErrorsHandler extends ErrorHandler {
constructor(
private injector: Injector,private errorLogService: ErrorLogService
) {
super();
alert('GlobalErrorsHandler');
}
handleError(error: Error | HttpErrorResponse) {
debugger;
let toaster = this.injector.get(ToasterService);
toaster.pop("head","body");
}
}
AppComponent.html <toaster-container [toasterconfig]="ang2toasterconfig"></toaster-container> <router-outlet></router-outlet> 拦截器的问题也是如此 import { Injectable,Injector } from '@angular/core';
import { HttpEvent,HttpInterceptor,HttpHandler,HttpRequest,HttpResponse,HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
import { ToasterService } from 'angular2-toaster';
import { AuthService } from 'app/blocks/auth/auth.service';
import { TranslateService } from 'ng2-translate';
import { AlertService } from '../../core/services/common';
@Injectable()
export class AppHttpInterceptor implements HttpInterceptor {
constructor(private injector: Injector) { }
intercept(req: HttpRequest<any>,next: HttpHandler): Observable<HttpEvent<any>> {
debugger;
console.log(req);
if (!window.navigator.onLine) { // check to see if there's internet
// if there is no internet,throw a HttpErrorResponse error
// since an error is thrown,the function will terminate here
return Observable.throw(new HttpErrorResponse({ error: 'NO_INTERNET' }));
} else {
// else return the normal request
return this.handleResponse(next,req);
}
}
handleResponse(next,req) {
return next.handle(req)
.do((ev: HttpEvent<any>) => {
if (ev instanceof HttpResponse) {
}
})
.catch((response: any) => {
if (response instanceof HttpErrorResponse) {
console.log('response in the catch: ',response);
this.handleReponseExceptions(response);
}
return Observable.throw(response);
});
}
handleReponseExceptions(exception) {
let toaster = this.injector.get(ToasterService);
let translate = this.injector.get(TranslateService);
// TOASTER NOT WORKING AND TRANSLATE NOT WORKING
toaster.pop("test","test");
this.translate.get(["test","test"]).subscribe(res => {
//NOT FETCHING FROM en.json
});
}
}
据我所知,在加载多士炉容器之前调用了toaster.pop(”,”)方法.如何解决这个问题.根组件是App组件,我放置了烤箱容器.请建议我解决此问题的架构. 还有一个,我需要处理不同的错误…在Local Errorhandler(组件级别)或全局错误处理程序或Interceptor中？ 示例错误：400,404,500 ……等
使用“angular2-toaster”：“^ 6.1.0”
这些API调用将在app组件之前触发
解决方法
这在角度2烤箱的自述文件中是
documented,因为它发生的次数和它引起的混乱.
这是由Angular如何在错误处理程序中处理UI调度(或者更确切地说,缺少调度)引起的.
export class AppErrorHandler implements ErrorHandler {
constructor(
private toasterService: ToasterService,private ngZone : NgZone) { }
handleError(error: any): void {
this.ngZone.run(() => {
this.toasterService.pop('error',"Error",error);
});
}
}
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
