如何在全局错误处理程序中正确重定向

Question

我有这个全局错误处理程序：

import { ErrorHandler, Injectable, Injector } from '@angular/core';
import { Router } from '@angular/router';

    @Injectable()
    export class GlobalErrorHandler extends ErrorHandler  
    {
        constructor(private injector: Injector) {
            super(false);
        }

        handleError(error) {
            super.handleError(error);
            const router = this.injector.get(Router);
                router.navigateByUrl('/error');
        }

    }

我放在app.module:

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

为了对此进行测试，我在服务中抛出了一个错误。由于某种原因，错误组件 与页面的其他内容一起 显示。像这样：

如果我通过转到 /error 来测试错误组件，它会显示如下（错误页面是单行段落）：

Sorry, something went wrong!

但是当我转到应该触发错误的主页时，它显示如下：

Sorry, something went wrong!

....
... Original content for /home
....

Sorry, something went wrong!

谁能告诉我我做错了什么？

更新

我已经更新到 angular-cli 1.5.2 并且还更新到 angular 5 并且错误似乎已修复。我可以使用路由器导航到错误页面。

Answer 1

我做了一些研究，这就是它的行为方式的原因：

由于您在服务中抛出错误，因此无法销毁正在使用该服务的组件，因此路由器无法释放它。谢谢@TetraDev for .

虽然有人可能认为这是一个 Angular 错误，但我无法确认，因为我还没有找到相关的未解决问题（如果您有 link，请随时更新答案）。

为了解决您的问题，我建议在这种情况下不要使用 Router，而是执行浏览器重定向 window.location.href = '/error';。

Answer 2

这取决于您放置路由器插座的位置。如果你是这样的：

<router-outlet></router-outlet>
<!-- Home Component Content -->

它将像您所说的那样加载其他组件内容。为了避免这种行为，你必须像这样构造你的主要组件：

<router-outlet></router-outle>

仅此而已，以及所有页面中您想要的内容，包括错误页面。

如何在全局错误处理程序中正确重定向

How to redirect correctly in a global error handler

angular

error-handling

angular-ui-router