2
我试图为我的Angular4应用程序实现一般的ErrorHandler，目的是显示一个对话框，其中包含有关我收到的错误的一些信息。使用Material Design的Angular2应用程序的一般错误处理程序
这是错误处理程序：
import { ErrorHandler, Injectable, Injector } from '@angular/core'
// import { Router } from '@angular/router'
import { MatDialog } from '@angular/material'
import { HttpErrorResponse } from '@angular/common/http'
import { MessageDialog } from './message.dialog'
// import { LoginService } from '../login/main.service'
@Injectable()
export class DialogErrorHandler implements ErrorHandler {
constructor(private injector: Injector) {
}
handleError(error: any): void {
let localError = error;
let finalMessage: string = "Errore sconosciuto";
let finalCallback:() => void =() => { console.log("default callback")};
let dialog: MatDialog = this.injector.get(MatDialog);
// let login: LoginService = this.injector.get(LoginService);
// let router: Router = this.injector.get(Router);
if(localError instanceof HttpErrorResponse && localError.error instanceof Error){
localError = localError.error
}
if (localError instanceof HttpErrorResponse) {
console.log("http error");
let errorDesc = localError.status + " " + localError.statusText + ": ";
switch (localError.status) {
case 403:
finalMessage = "La sessione è scaduta, ripeti il login.";
// finalCallback =() => { login.logout(); router.navigate['/login']; };
break;
case 500:
finalMessage = "Errore sul server - " + errorDesc + localError.error;
break;
default:
finalMessage = errorDesc;
}
} else {
finalMessage = localError.toString();
finalCallback =() => { location.reload() };
}
dialog.open(MessageDialog, {
data: {
message: finalMessage,
callback: finalCallback
}
})
console.log(error);
}
}
虽然这是对话框：
import { Component, Inject } from '@angular/core'
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material'
@Component({
selector: 'message-dialog',
template: `
<p mat-dialog-title color="primary" class="centered">Attenzione</p>
<div mat-dialog-content>{{message}}</div>
<div mat-dialog-actions style="display: flex; justify-content: center">
<button mat-button mat-dialog-close (click)="handleClick()">
OK
</button>
</div>
`,
styleUrls: ['../common/style.css']
})
export class MessageDialog {
message: string = "cose";
callback:() => void;
constructor(@Inject(MAT_DIALOG_DATA) private data,
private diagref: MatDialogRef<MessageDialog>) {
if (data) {
this.message = data.message;
this.callback = data.callback;
}
}
handleClick() {
this.diagref.close();
if (this.callback) {
this.callback();
}
}
}
这是我得出了一个plunkr：现在https://plnkr.co/edit/dZ9yNf?p=preview
，问题是在我发布错误之后，MatDialog I显示器不显示消息并且不关闭。它正确地执行回调函数，但它保持在那里。
- 我一直无法重现plunkr中的行为。我不知道为什么，但我怀疑它与这个事实有关，plunkr将我的HttpErrorResponse对象包含在另一个错误中。尽管如此，在我的开发环境中，即使我评论考虑错误类型的所有代码，也存在错误。
- 我试着用MatSnackBar代替MatDialog，没有运气，仍然是同样的问题，小吃店出现并且不想消失。
- 对话框本身也用于其他情况，在正常关闭的情况下，不会给出任何问题。
- 调试我发现问题是，对话框试图关闭自己，但从未发布MatDialogContainer上的状态更改事件，因为执行后我看到状态正在改变，但未调用回调。
我在做什么错？为什么这个奇怪的行为你有什么建议吗？
P.S.评论的东西是我将需要的东西，但我已经能够取出来简化处理程序而不解决问题。它在那里，不会被注释，但它不是问题。
编辑︰9天后，一个风滚草徽章和其他的东西，我已经能够重现错误。相同的plunkr，差异在于错误的根源。特别是：
handleClick(){
Observable.throw(new Error("local error")).subscribe(
() => {},
(err) => {throw err)
)
}
throwError(){
this.http.get("http://www.google.com/thisshouldnotexist").subscribe(
() => {},
(err) => {throw err}
)
}
在这种情况下，顺利，而throwError挂在那儿。如果有人知道解决方案，请帮忙。