當錯誤發生時顯示自定義消息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)));