Angular中无需跳转路由不离开当前页将错误页作为浮层展示的实现方法

1. 创建错误浮层组件 #

首先生成独立的错误浮层组件，负责浮层的样式渲染和错误信息展示：

• 组件模板（error-modal.component.html）

<div class="error-modal-overlay" *ngIf="isVisible">
  <div class="error-modal-content">
    <h3>系统出现异常</h3>
    <p>{{ errorDetail }}</p>
    <button (click)="closeModal()">关闭</button>
  </div>
</div>

• 组件样式（error-modal.component.css）

.error-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}
.error-modal-content {
  background: #fff;
  padding: 2rem;
  border-radius: 4px;
  min-width: 400px;
}

• 组件逻辑（error-modal.component.ts）

import { Component } from '@angular/core';
import { ErrorModalService } from './error-modal.service';

@Component({
  selector: 'app-error-modal',
  templateUrl: './error-modal.component.html',
  styleUrls: ['./error-modal.component.css']
})
export class ErrorModalComponent {
  isVisible = false;
  errorDetail = '';

  constructor(private errorModalService: ErrorModalService) {
    // 订阅服务的显示通知
    this.errorModalService.showModal$.subscribe(errorMsg => {
      this.errorDetail = errorMsg;
      this.isVisible = true;
    });
  }

  closeModal() {
    this.isVisible = false;
    this.errorDetail = '';
  }
}

2. 实现错误浮层控制服务 #

创建全局服务用于跨模块通知浮层显隐，不需要依赖路由模块：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ErrorModalService {
  showModal$ = new Subject<string>();

  showError(errorMsg: string) {
    this.showModal$.next(errorMsg);
  }
}

3. 全局挂载浮层组件 #

在根组件模板app.component.html中引入浮层组件，保证所有页面都能渲染浮层：

<!-- 原有根组件的路由出口等内容保留 -->
<router-outlet></router-outlet>
<!-- 新增错误浮层组件 -->
<app-error-modal></app-error-modal>

4. 修改CustomErrorHandler逻辑 #

替换原来的路由跳转逻辑，改为调用服务触发浮层显示：

@Injectable()
export class CustomErrorHandler implements ErrorHandler {
  constructor(private errorModalService: ErrorModalService) {}

  handleError(errorObj: Error) {
    // 可根据需求格式化错误信息
    const errorDetails = errorObj.message || JSON.stringify(errorObj);
    this.errorModalService.showError(errorDetails);
    // 可选：打印错误到控制台方便排查
    console.error(errorObj);
  }
}

5. 模块注册 #

最后记得在AppModule中注册自定义ErrorHandler、声明错误浮层组件：

@NgModule({
  declarations: [
    // 原有声明
    ErrorModalComponent
  ],
  providers: [
    { provide: ErrorHandler, useClass: CustomErrorHandler }
  ]
})
export class AppModule { }

如果需要保留原有/error路由的访问能力，只需要在对应路由的组件初始化时调用ErrorModalService的showError方法传入参数即可。

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