Angular中发起HTTP请求时如何冻结页面禁止用户点击跳转？

• 核心实现思路：通过一个全局共享的 loading 状态，统一控制页面交互屏蔽、跳转按钮禁用，还可以搭配路由拦截兜底，彻底避免用户在请求完成前执行跳转操作。

1. 首先创建全局 Loading 服务维护状态 #

建议用 Angular 服务维护全局 loading 计数（兼容并发请求场景，避免单个请求结束就提前关闭 loading），服务示例代码：

// loading.service.ts
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class LoadingService {
  private requestCount = 0;
  get isLoading(): boolean {
    return this.requestCount > 0;
  }

  addRequest(): void {
    this.requestCount++;
  }

  removeRequest(): void {
    if (this.requestCount > 0) {
      this.requestCount--;
    }
  }
}

2. 实现全局遮罩冻结整页交互 #

在根组件 app.component 中添加全屏遮罩层，loading 状态为 true 时显示，直接拦截所有页面点击操作：

<!-- app.component.html -->
<!-- 全屏遮罩层 -->
<div *ngIf="loadingService.isLoading" class="global-mask"></div>
<!-- 原有页面内容 -->
<router-outlet></router-outlet>

对应的样式：

/* app.component.css */
.global-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.1); /* 可调整透明度，也可以自定义加载动画 */
  z-index: 9999; /* 保证层级高于所有页面元素 */
  pointer-events: all; /* 拦截所有点击事件 */
}

3. 禁用跳转按钮的跳转功能 #

给跳转按钮绑定 loading 状态，直接禁用按钮同时清空路由跳转地址：

<!-- 跳转按钮所在组件的html文件 -->
<button 
  [disabled]="loadingService.isLoading"
  [routerLink]="loadingService.isLoading ? null : '/你的目标路由'"
>
  跳转按钮
</button>

如果是自定义点击事件触发跳转，可以在事件中加判断：

// 跳转按钮所在组件的ts文件
jumpToPage(): void {
  if (this.loadingService.isLoading) return;
  this.router.navigate(['/你的目标路由']);
}

4. 可选：添加路由守卫做兜底拦截 #

如果要防止用户通过地址栏输入、浏览器前进后退等方式跳转，可以加路由守卫：

// loading.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { LoadingService } from './loading.service';

@Injectable({ providedIn: 'root' })
export class LoadingGuard implements CanActivate {
  constructor(private loadingService: LoadingService) {}

  canActivate(): boolean {
    // loading状态下直接阻止跳转
    return !this.loadingService.isLoading;
  }
}

之后在路由配置中给需要拦截的路由加上该守卫即可生效。

5. 自动关联HTTP请求的loading状态 #

可以通过 HTTP 拦截器自动修改 loading 状态，无需每个请求手动调用：

// loading.interceptor.ts
import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';
import { finalize } from 'rxjs/operators';
import { LoadingService } from './loading.service';

@Injectable()
export class LoadingInterceptor implements HttpInterceptor {
  constructor(private loadingService: LoadingService) {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    this.loadingService.addRequest();
    return next.handle(request).pipe(
      finalize(() => {
        // 请求成功/失败都减少计数
        this.loadingService.removeRequest();
      })
    );
  }
}

之后把拦截器注册到 app.module.ts 的 providers 数组中即可全局生效。

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