Angular 14：如何让自定义错误页面始终显示在最上层

方案一：主动关闭所有模态框（推荐） #

从用户体验逻辑出发，错误页面出现时应关闭所有打开的模态框，避免界面混乱：

1. HTTP错误拦截时关闭模态框
   在全局错误拦截器中捕获HTTP错误后，调用BsModalService的hideAll()方法关闭所有模态框，再跳转至错误页面：

import { Injectable } from '@angular/core';
import { HttpErrorResponse, HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { BsModalService } from 'ngx-bootstrap/modal';
import { Router } from '@angular/router';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  constructor(private modalService: BsModalService, private router: Router) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      catchError((error: HttpErrorResponse) => {
        this.modalService.hideAll();
        this.router.navigate(['/error']);
        return throwError(() => error);
      })
    );
  }
}

2. 路由跳转错误页面时关闭模态框
   在AppComponent中监听路由导航事件，检测到跳转到错误页面时关闭所有模态框：

import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { BsModalService } from 'ngx-bootstrap/modal';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private router: Router, private modalService: BsModalService) {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      if (event.url.includes('/error')) {
        this.modalService.hideAll();
      }
    });
  }
}

方案二：提高错误页面的z-index层级 #

若需保留模态框同时让错误页面显示在最上层，可通过CSS设置错误页面的z-index高于ngx-bootstrap模态框的默认值（模态框默认z-index为1050，遮罩层为1040）：

在错误页面组件的样式文件中添加：

.error-page-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

方案三：修改模态框默认z-index（不推荐） #

此方法可能影响其他场景的模态框显示，仅在必要时使用。在全局样式文件（如styles.scss）中覆盖默认样式：

.modal-backdrop {
  z-index: 900 !important;
}
.modal-content {
  z-index: 950 !important;
}

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