angular – 自定义错误处理程序抛出错误:无法读取未定义的属性
我正在角度4中构建一个自定义错误处理程序,以处理错误拦截器的不同类型的应用程序错误
创建一个基类(app-error.ts)和其他类(例如处理403错误创建类access-denied.ts),这些类扩展了这个基类. 在基类中注入了一个服务toastrService,我想显示来自子类的自定义消息但是它给出了错误 无法读取未定义的属性’get’ 这个问题与OOPS概念有关.我不明白如何获取覆盖父方法或使用我的自定义参数调用. TS v 2.3.3 app.module.ts providers: [ { provide: ErrorHandler,useClass: AppErrorHandler } ] 注意:AppErrorHandler类与AppError完全不同,AppError扩展了处理系统错误的角度ErorHandler接口. 错误拦截 import { Router } from '@angular/router'; import { Injectable,Injector } from '@angular/core'; import { HttpInterceptor,HttpResponse,HttpRequest,HttpHandler,HttpEvent,HttpErrorResponse } from '@angular/common/http'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/do'; import { AuthFail,BadInput,NotFoundError,ServerError,AppError,AccessDenied,} from '../shared/errors'; import { AuthenticationService } from './../authentication/authentication.service'; @Injectable() export class ErrorInterceptor implements HttpInterceptor { private auth: AuthenticationService; constructor(private router: Router,private injector: Injector) { } intercept(req: HttpRequest<any>,next: HttpHandler): Observable<HttpEvent<any>> { const auth = this.injector.get(AuthenticationService); return next.handle(req).catch((err: HttpErrorResponse) => { if (err instanceof HttpErrorResponse) { if (err.status === 401) { return Observable.throw(new AuthFail(err.error)); } if (err.status === 400) { return Observable.throw(new BadInput(err.error)); } if (err.status === 404) { return Observable.throw(new NotFoundError()); } if (err.status === 403) { return Observable.throw(new AccessDenied()); } return Observable.throw(new AppError(err)); } }); } } 访问denied.ts import { AppError } from './app-error'; export class AccessDenied extends AppError { constructor(public originalError?: any) { super(); console.log('inside acces denied constructor'); // super.handleError("superrrrr"); // this also doesn't work } public handleError(): void { console.log('handleError: ',); super.handleError("Access denined error occured"); } } APP-error.ts import { Inject,Injector } from "@angular/core"; import { ToastrService } from "ngx-toastr"; export class AppError { toastrService: ToastrService; constructor(public originalError?: any,private injector?: Injector) { this.toastrService = this.injector.get(ToastrService); } // NOTE: using getter seems impossible to access in child so add the same in constructor // get toastrService(): ToastrService { // return this.injector.get(ToastrService); // } public handleError(msg: string): void { this.toastrService.error(`Error Message: ${msg}`,"Error",{ closeButton: true,timeOut: 5000,onActivateTick: true } ); } } 给出错误 core.es5.js:1020 ERROR TypeError: Cannot read property 'get' of undefined at AccessDenied.AppError (app-error.ts:8) at new AccessDenied (access-denied.ts:6) at CatchSubscriber.eval [as selector] (error.interceptor.ts:61) at CatchSubscriber.error (catchError.js:105) at XMLHttpRequest.onLoad (http.es5.js:1739) at ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.es5.js:3881) at ZoneDelegate.invokeTask (zone.js:420) at Zone.runTask (zone.js:188) at ZoneTask.invokeTask [as invoke] (zone.js:496) 解决方法
AccessDenied错误地扩展了AppError. super()导致注入器未定义,并且注入器在AppError构造函数中不应该是可选的,因为它是必需的.
可以通过强制参数来修复它: constructor(private injector: Injector,public originalError?: any) { this.toastrService = this.injector.get(ToastrService); } AccessDenied中可以省略构造函数.并且应该像新的AccessDenied(注入器)一样进行实例化. 这里真正的问题是AppError完成了它不应该做的工作.考虑到它只是包含以后可以使用错误的appof instanceof确定的错误,它不应该执行当前在handleError中完成的副作用. handleError中的逻辑可以移动到ToastrService中的方法,或者单独接受AppError实例的错误服务.如果需要为错误类型提供默认消息,例如发生访问被拒绝错误,则AppError可以具有包含该消息的公共属性. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |