通过 Custom ErrorHandler 出现错误时显示自定义消息

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;
  }
}

所以这是一个 class 保持电流 error status。通过方法 getStatus 我将确定是否有必要显示消息。当然，我已经在 app.module 中添加了 providers 部分必要的字段。

在app.component.html-我的主要component我添加了

<error-handler></error-handler>

会显示错误

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

现在我只是注入 class 我的服务：

@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)));

通过 Custom ErrorHandler 出现错误时显示自定义消息

Displaing custom message when error comes through CustomErrorHandler

error-handling

http-status-code-404

angular