我正在 Angular 4 中构建自定义错误处理程序,以使用错误拦截器处理不同类型的应用程序错误
创建一个基类(应用程序错误.ts)和其他类(例如处理 403 错误创建类拒绝访问.ts) 扩展了这个基类。
在基类中注入了一个服务toastrService
我想显示来自子类的自定义消息,但它给出了错误
无法读取未定义的属性“get”
这个问题与OOPS概念有关。我不明白如何覆盖父方法或使用我的自定义参数进行调用。
TS 版本 2.3.3
角度 v 4.3.4
应用程序模块.ts
providers: [
{ provide: ErrorHandler, useClass: AppErrorHandler }
]
注意:AppErrorHandler 类与 AppError 完全不同,AppError 类扩展了处理系统错误的 Angular 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));
}
});
}
}
拒绝访问.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");
}
}
应用程序错误.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)