Angular5自定义错误页跳转异常：触发错误后原页面仍显示

我来帮你搞定这个问题！你遇到的原页面残留情况，大概率是因为错误处理器里的路由跳转逻辑不完整，或者Router实例的获取/使用有问题，还有可能是错误页的路由配置没做好。下面一步步给你解决：

1. 完善自定义错误处理器代码 #

你当前的handleError方法还没写完，首先要确保正确获取Router实例并完成路由跳转，同时处理跳转过程中的异常：

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

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

  handleError(error: any): void {
    console.log("Custom error handler triggered:", error);
    
    // 通过Injector获取Router，避免循环依赖问题
    const router = this.injector.get(Router);
    
    // 跳转到你的自定义错误页，这里假设路由路径是'/error'
    router.navigate(['/error'])
      .then(() => {
        // 跳转成功后，调用父类的错误处理逻辑，确保默认的错误日志等行为正常执行
        super.handleError(error);
      })
      .catch(navError => {
        console.error("Failed to navigate to error page:", navError);
        super.handleError(error);
      });
  }
}

2. 在AppModule中注册自定义错误处理器 #

一定要把默认的ErrorHandler替换成你自己的，否则自定义处理器不会生效：

import { NgModule, ErrorHandler } from '@angular/core';
import { CustomErrorHandler } from './path-to-your-custom-error-handler';

@NgModule({
  declarations: [
    // 你的组件声明
  ],
  imports: [
    // 导入的模块，比如RouterModule等
  ],
  providers: [
    // 替换默认错误处理器
    { provide: ErrorHandler, useClass: CustomErrorHandler }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 确保错误页路由是独立顶级路由 #

如果你的错误页嵌套在其他布局组件（比如带侧边栏、导航栏的主布局）里，可能会导致原布局的内容残留。要把错误页配置成顶级路由：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ErrorPageComponent } from './path-to-your-error-page-component';

const routes: Routes = [
  // 你的其他路由配置
  { path: 'error', component: ErrorPageComponent },
  // 可选：把404页面也跳转到错误页
  { path: '**', redirectTo: '/error' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

4. 处理异步错误的全局捕获 #

Angular的ErrorHandler可能捕获不到部分异步错误（比如Promise未捕获的异常），这时候需要添加全局捕获逻辑，避免这些错误导致页面状态异常：

在main.ts里添加以下代码：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { Injector } from '@angular/core';
import { CustomErrorHandler } from './app/path-to-your-custom-error-handler';

// 保存全局Injector实例
let appInjector: Injector;

platformBrowserDynamic().bootstrapModule(AppModule)
  .then(moduleRef => {
    appInjector = moduleRef.injector;
  })
  .catch(err => console.error(err));

// 捕获全局同步错误
window.onerror = function(message, source, lineno, colno, error) {
  if (appInjector) {
    const errorHandler = appInjector.get(CustomErrorHandler);
    errorHandler.handleError(error);
  }
  return true;
};

// 捕获Promise未处理的异常
Promise.prototype.catch = function(onRejected) {
  return Promise.prototype.catch.call(this, (error) => {
    if (appInjector) {
      const errorHandler = appInjector.get(CustomErrorHandler);
      errorHandler.handleError(error);
    }
    return onRejected(error);
  });
};

按照上面的步骤调整后，应该就能解决跳转错误页时原页面残留的问题啦～

内容的提问来源于stack exchange，提问作者KellyM