将用户从ErrorHandler的handleError函数路由到错误页面

Question

我创建了一个扩展GlobalErrorHandler的类ErrorHandler，我希望将用户从handleError函数中路由到错误页面。

目标是避免每次抛出致命错误时都将用户路由到错误，这会留下开发错误的空间和错过的用例，用户将在没有消息的情况下冒犯页面。

GlobalErrorHandler课程本身效果很好。

这里我将覆盖默认提供程序 app.module.js

providers: [
    ...
    {
        provide: ErrorHandler,
        useClass: GlobalErrorHandler
    }
],

我第一次试图像你想要的那样注入路由器。由于路由器依赖于快速关闭的ErrorHandler。所以我根据一些互联网搜索尝试了以下内容

error.ts

@Injectable()
export class GlobalErrorHandler extends ErrorHandler {

  constructor(
    private logglyService:LogglyLoggerService,
    private inj: Injector
    // private router: Router // Clearly doesn't work
  ) {
    super();
  }

  handleError(error) {
    let router = this.inj.get(Router)
    router.navigate(['error'], { skipLocationChange: true, replaceUrl: false })
        .then(data => console.log('THEN', data)) // Route was success
        .catch(data => console.log('catch', data));
    this.logglyService.log(error);
  }
}

我已注入Injector服务并使用它来获取Router。这“有效”。在项目的其他地方，我做了一些错误并测试它。

它将用户重定向到错误页面，但有问题的页面仍在其下方。

看起来像这样

 ___________________________________
|                                   |
|                                   |
|       Orignal Page                |
|                                   |
|       /Error button\              |
|                                   |
 ___________________________________

然后单击按钮并获取此

 ___________________________________
|                                   |
|                                   |
|       You found an error          |
|                                   |
|                                   |
 ___________________________________
|                                   |
|                                   |
|       Original Page               |
|                                   |
|       /Error button\              |
|                                   |
 ___________________________________

好像Router获得的GlobalErrorHandler是除了Router之外的其他东西的路由器，当我将其注入项目的其他位置时，我得到了<{1}}

注意：原始页面不再起作用。

注意：刚刚添加.then和.catch以查看.navigate来电是否失败。不是。