当错误发生时显示自定义消息CustomErrorHandler

Question

我想创建一个自定义弹出窗口，以便在任何http error出现时通知用户并显示自定义消息。要做到这一点，我创建一个自定义event handler看起来像：

@Injectable() 
export class CustomErrorHandler extends ErrorHandler { 

    constructor(private errorHandlerService: ErrorHandlerService){ 
    super(false); 
    } 
    public handleError(error: any): void { 
    super.handleError(error); 
    if (error.status == 500){ 
     this.errorHandlerService.setStatus = error.status; 
     alert('error 500'); 
    } 
    } 
} 

而且我已经创建了一个service它只有一个欢迎使用属性 - status：

@Injectable() 
export class ErrorHandlerService { 
    private status: any; 


    get getStatus(){ 
    return this.status; 
    } 

    set setStatus(status : any){ 
    this.status = status; 
    } 
} 

所以这是保持当前error status类。通过方法getStatus我将确定是否有必要显示消息。当然，我在app.module中加入了providers部分的必要字段。

在app.component.html - 我的主要component我已经加入

<error-handler></error-handler> 

将显示错误。

那么主要问题如何以最好的方式实现我的error-handler component？首先，我想到injecting到构造函数我的errorHandlerService，但后来我认识到status永远不会改变。所以请建议我或告诉如何正确地做。

现在我只注入到类我的服务：

@Component({ 
    selector: 'error-handler', 
    templateUrl: './error-handler.component.html', 
    styleUrls: ['./error-handler.component.css'] 
}) 
export class ErrorHandlerComponent implements OnInit { 
    showErrorMessage = false; 

    constructor(private errorHandlerService: ErrorHandlerService) {} 

    ngOnInit() {} 

} 

.html 
<h1 *ngIf="showErrorMessage ">Error appears!</h1> 

Answer 1

app.component.html

通过添加<error-handler></error-handler>这个文件，随时可用的全局。

<ng-container *ngIf="showErrorMessage"> 
 
    <h1>Error handler container</h1> 
 
    <error-handler></error-handler> 
 
</ng-container> 
 
<router-outlet></router-outlet>

app.component.ts

constructor(private errorHandlerService: ErrorHandlerService, private cd: ChangeDetectorRef) {} 
 

 
showErrorMessage = false; 
 
ngOnInit() { 
 
    this.errorHandlerService.getStatus().subscribe((err: any) => { 
 
     if (err != "200") { 
 
     showErrorMessage = true; 
 
     } else { 
 
     showErrorMessage = false; 
 
     } 
 
     this.cd.markForCheck(); 
 
    }); 
 
    }

ErrorHandlerService

@Injectable() 
 
export class ErrorHandlerService { 
 
    private status: Subject<any> = new Subject(); 
 

 
    getStatus(): Observable<any>{ 
 
    return this.status.asObservable(); 
 
    } 
 

 
    setStatus(status : any){ 
 
    this.status.next(status); 
 
    } 
 
}

我对该服务添加了一些更改。

The status can now store the last value as long as the service is in used or otherwise destroyed.

getStatus() method now returns a Observable which means you can subscribe to it and Angular will track for changes

return this.http.get("url") 
 
     .map((res) => res.json() as Class) 
 
     .catch((err: Response) => Observable.throw(youmethod(err)));